@workos-inc/widgets 1.20.2-next.1792439904014 → 1.20.2-next.1792451814155

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 1.20.2-next.1792439904014
+## 1.20.2-next.1792451814155
 
 ### Patch Changes
 
@@ -12,6 +12,8 @@
 
 - Honor `patternFlags` when validating configuration fields in `PipesAdmin`, so uppercase Snowflake account identifiers are accepted.
 
+- Fixed edge-case bugs with React's concurrent rendering
+
 - Memoize i18n translate function
 
 - Update internal GraphQL API calls

package/dist/cjs/lib/compose-refs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"compose-refs.cjs","names":["React"],"sources":["../../../src/lib/compose-refs.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n  if (typeof ref === \"function\") {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup == \"function\") {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup == \"function\") {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { useComposedRefs };\n"],"mappings":";;;;;;;;;AAQA,SAAS,OAAU,KAAqB,OAAU;CAChD,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,QACjC,IAAI,UAAU;AAElB;;;;;AAMA,SAAS,YAAe,GAAG,MAA8C;CACvE,QAAQ,SAAS;EACf,IAAI,aAAa;EACjB,MAAM,WAAW,KAAK,KAAK,QAAQ;GACjC,MAAM,UAAU,OAAO,KAAK,IAAI;GAChC,IAAI,CAAC,cAAc,OAAO,WAAW,YACnC,aAAa;GAEf,OAAO;EACT,CAAC;EAMD,IAAI,YACF,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,OAAO,WAAW,YACpB,QAAQ;SAER,OAAO,KAAK,IAAI,IAAI;GAExB;EACF;CAEJ;AACF;;;;;AAMA,SAAS,gBAAmB,GAAG,MAA8C;CAE3E,OAAOA,MAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD"}
+{"version":3,"file":"compose-refs.cjs","names":["React"],"sources":["../../../src/lib/compose-refs.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n  if (typeof ref === \"function\") {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup == \"function\") {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup == \"function\") {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // oxlint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { useComposedRefs };\n"],"mappings":";;;;;;;;;AAQA,SAAS,OAAU,KAAqB,OAAU;CAChD,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,QACjC,IAAI,UAAU;AAElB;;;;;AAMA,SAAS,YAAe,GAAG,MAA8C;CACvE,QAAQ,SAAS;EACf,IAAI,aAAa;EACjB,MAAM,WAAW,KAAK,KAAK,QAAQ;GACjC,MAAM,UAAU,OAAO,KAAK,IAAI;GAChC,IAAI,CAAC,cAAc,OAAO,WAAW,YACnC,aAAa;GAEf,OAAO;EACT,CAAC;EAMD,IAAI,YACF,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,OAAO,WAAW,YACpB,QAAQ;SAER,OAAO,KAAK,IAAI,IAAI;GAExB;EACF;CAEJ;AACF;;;;;AAMA,SAAS,gBAAmB,GAAG,MAA8C;CAE3E,OAAOA,MAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD"}

package/dist/cjs/lib/elevated-access.cjs

@@ -18,11 +18,15 @@ let _radix_ui_themes_components_alert_dialog = require("@radix-ui/themes/compone
 function ElevatedAccess({ type = "dialog", children, onVerified }) {
 	const { elevatedAccess } = require_api_api_provider.useElevatedAccessToken();
 	const [authenticationChallengeId, setAuthenticationChallengeId] = (0, react.useState)();
-	const prevAccessToken = (0, react.useRef)(elevatedAccess);
+	const [{ prevAccessToken, hasTokenExpired }, setPrevAccessState] = (0, react.useState)({
+		prevAccessToken: elevatedAccess,
+		hasTokenExpired: false
+	});
+	if (elevatedAccess !== prevAccessToken) setPrevAccessState({
+		prevAccessToken: elevatedAccess,
+		hasTokenExpired: hasTokenExpired || !!prevAccessToken && !elevatedAccess
+	});
 	const hasCalledOnVerified = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		prevAccessToken.current = elevatedAccess;
-	}, [elevatedAccess]);
 	const handleVerificationSuccess = (0, react.useCallback)((elevatedAccessToken) => {
 		setAuthenticationChallengeId(void 0);
 		if (!hasCalledOnVerified.current) {
@@ -31,16 +35,13 @@ function ElevatedAccess({ type = "dialog", children, onVerified }) {
 		}
 	}, [onVerified]);
 	if (elevatedAccess) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-	if (!authenticationChallengeId) {
-		const hasTokenExpired = !!prevAccessToken.current;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendVerificationEmailForm, {
-			type,
-			hasTokenExpired,
-			onSuccess: (challengeId) => {
-				setAuthenticationChallengeId(challengeId);
-			}
-		});
-	}
+	if (!authenticationChallengeId) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendVerificationEmailForm, {
+		type,
+		hasTokenExpired,
+		onSuccess: (challengeId) => {
+			setAuthenticationChallengeId(challengeId);
+		}
+	});
 	if (authenticationChallengeId) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VerificationIdentityForm, {
 		type,
 		authenticationChallengeId,

package/dist/cjs/lib/elevated-access.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"elevated-access.cjs","names":["useElevatedAccessToken","useState","useRef","useCallback","useMe","useClientGraphqlMutation","expectResultMember","Translation","Text","Callout","Flex","Button"],"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import { Callout, Flex, Text } from \"@radix-ui/themes\";\nimport type { PropsWithChildren } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { useClientGraphqlMutation } from \"../api/client-graphql/hooks.js\";\nimport { useMe } from \"./api/me.js\";\nimport { expectResultMember } from \"./client-graphql-result.js\";\nimport { AlertDialog, Button, Dialog } from \"./elements.js\";\nimport * as Form from \"./form.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport * as Otp from \"./otp-input.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: (elevatedAccessToken: string) => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const prevAccessToken = useRef(elevatedAccess);\n  const hasCalledOnVerified = useRef(false);\n\n  useEffect(() => {\n    prevAccessToken.current = elevatedAccess;\n  }, [elevatedAccess]);\n\n  const handleVerificationSuccess = useCallback(\n    (elevatedAccessToken: string) => {\n      setAuthenticationChallengeId(undefined);\n\n      // Only call onVerified on the initial verification, not on\n      // re-verifications after token expiry, so side effects (e.g. creating a\n      // new TOTP factor) don't re-run and discard the user's progress.\n      if (!hasCalledOnVerified.current) {\n        hasCalledOnVerified.current = true;\n        return onVerified?.(elevatedAccessToken);\n      }\n    },\n    [onVerified],\n  );\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    // FIXME: This should be refactored\n    // eslint-disable-next-line react-hooks/refs\n    const hasTokenExpired = !!prevAccessToken.current;\n\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={handleVerificationSuccess}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useClientGraphqlMutation({\n    mutationFn: async (sdk) =>\n      expectResultMember(\n        (await sdk.SendVerificationCode()).sendVerificationCode,\n        \"VerificationCodeSent\",\n      ),\n    onSuccess: (data) => onSuccess(data.authenticationChallengeId),\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired ? (\n          <Translation\n            defaultMessage=\"Your verification token has expired\"\n            id=\"lb/AsC\"\n            description=\"Dialog title when verification token has expired\"\n          />\n        ) : (\n          <Translation\n            defaultMessage=\"Verify your identity\"\n            id=\"7tGCOh\"\n            description=\"Dialog title for identity verification\"\n          />\n        )}\n      </Title>\n\n      <Description mb=\"5\">\n        <Translation\n          defaultMessage=\"To continue, we need to confirm your identity. We'll send a temporary verification code to {email}.\"\n          id=\"FTUSRM\"\n          description=\"Description explaining verification code will be sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button\n            variant=\"secondary\"\n            type=\"button\"\n            disabled={sendVerification.isPending}\n          >\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={sendVerification.isPending}>\n          <Translation\n            defaultMessage=\"Send verification code\"\n            id=\"XsTeXJ\"\n            description=\"Button text to send verification code\"\n          />\n        </Button>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: (elevatedAccessToken: string) => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useClientGraphqlMutation({\n    mutationFn: async (\n      sdk,\n      input: { code: string; authenticationChallengeId: string },\n    ) =>\n      expectResultMember(\n        (await sdk.VerifyCurrentEmail({ input })).verifyCurrentEmail,\n        \"CurrentEmailVerified\",\n      ),\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [otpValue, setOtpValue] = useState<string>(\"\");\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        code,\n        authenticationChallengeId,\n      });\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        expiresAt: newAuthState.expiresAt,\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess(newAuthState.elevatedAccessToken);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>\n        <Translation\n          defaultMessage=\"Verify your identity\"\n          id=\"7tGCOh\"\n          description=\"Dialog title for identity verification\"\n        />\n      </Title>\n\n      <Description>\n        <Translation\n          defaultMessage=\"A verification code was sent to {email}. Please enter it below.\"\n          id=\"kvxE0S\"\n          description=\"Description explaining where verification code was sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\n          value={otpValue}\n          onValueChange={setOtpValue}\n        >\n          <Otp.Input required autoFocus autoComplete=\"off\" />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n        </Otp.Root>\n\n        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button variant=\"secondary\" type=\"button\">\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={isSubmitting}>\n          <Translation\n            defaultMessage=\"Confirm\"\n            id=\"EmYENK\"\n            description=\"Confirm button text for verification\"\n          />\n        </Button>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (!message || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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"}
+{"version":3,"file":"elevated-access.cjs","names":["useElevatedAccessToken","useState","useRef","useCallback","useMe","useClientGraphqlMutation","expectResultMember","Translation","Text","Callout","Flex","Button"],"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import { Callout, Flex, Text } from \"@radix-ui/themes\";\nimport type { PropsWithChildren } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { useClientGraphqlMutation } from \"../api/client-graphql/hooks.js\";\nimport { useMe } from \"./api/me.js\";\nimport { expectResultMember } from \"./client-graphql-result.js\";\nimport { AlertDialog, Button, Dialog } from \"./elements.js\";\nimport * as Form from \"./form.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport * as Otp from \"./otp-input.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: (elevatedAccessToken: string) => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const [{ prevAccessToken, hasTokenExpired }, setPrevAccessState] = useState({\n    prevAccessToken: elevatedAccess,\n    hasTokenExpired: false,\n  });\n  if (elevatedAccess !== prevAccessToken) {\n    setPrevAccessState({\n      prevAccessToken: elevatedAccess,\n      hasTokenExpired:\n        hasTokenExpired || (!!prevAccessToken && !elevatedAccess),\n    });\n  }\n\n  const hasCalledOnVerified = useRef(false);\n\n  const handleVerificationSuccess = useCallback(\n    (elevatedAccessToken: string) => {\n      setAuthenticationChallengeId(undefined);\n\n      // Only call onVerified on the initial verification, not on\n      // re-verifications after token expiry, so side effects (e.g. creating a\n      // new TOTP factor) don't re-run and discard the user's progress.\n      if (!hasCalledOnVerified.current) {\n        hasCalledOnVerified.current = true;\n        return onVerified?.(elevatedAccessToken);\n      }\n    },\n    [onVerified],\n  );\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={handleVerificationSuccess}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useClientGraphqlMutation({\n    mutationFn: async (sdk) =>\n      expectResultMember(\n        (await sdk.SendVerificationCode()).sendVerificationCode,\n        \"VerificationCodeSent\",\n      ),\n    onSuccess: (data) => onSuccess(data.authenticationChallengeId),\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired ? (\n          <Translation\n            defaultMessage=\"Your verification token has expired\"\n            id=\"lb/AsC\"\n            description=\"Dialog title when verification token has expired\"\n          />\n        ) : (\n          <Translation\n            defaultMessage=\"Verify your identity\"\n            id=\"7tGCOh\"\n            description=\"Dialog title for identity verification\"\n          />\n        )}\n      </Title>\n\n      <Description mb=\"5\">\n        <Translation\n          defaultMessage=\"To continue, we need to confirm your identity. We'll send a temporary verification code to {email}.\"\n          id=\"FTUSRM\"\n          description=\"Description explaining verification code will be sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button\n            variant=\"secondary\"\n            type=\"button\"\n            disabled={sendVerification.isPending}\n          >\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={sendVerification.isPending}>\n          <Translation\n            defaultMessage=\"Send verification code\"\n            id=\"XsTeXJ\"\n            description=\"Button text to send verification code\"\n          />\n        </Button>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: (elevatedAccessToken: string) => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useClientGraphqlMutation({\n    mutationFn: async (\n      sdk,\n      input: { code: string; authenticationChallengeId: string },\n    ) =>\n      expectResultMember(\n        (await sdk.VerifyCurrentEmail({ input })).verifyCurrentEmail,\n        \"CurrentEmailVerified\",\n      ),\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [otpValue, setOtpValue] = useState<string>(\"\");\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        code,\n        authenticationChallengeId,\n      });\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        expiresAt: newAuthState.expiresAt,\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess(newAuthState.elevatedAccessToken);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>\n        <Translation\n          defaultMessage=\"Verify your identity\"\n          id=\"7tGCOh\"\n          description=\"Dialog title for identity verification\"\n        />\n      </Title>\n\n      <Description>\n        <Translation\n          defaultMessage=\"A verification code was sent to {email}. Please enter it below.\"\n          id=\"kvxE0S\"\n          description=\"Description explaining where verification code was sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\n          value={otpValue}\n          onValueChange={setOtpValue}\n        >\n          <Otp.Input required autoFocus autoComplete=\"off\" />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n        </Otp.Root>\n\n        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button variant=\"secondary\" type=\"button\">\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={isSubmitting}>\n          <Translation\n            defaultMessage=\"Confirm\"\n            id=\"EmYENK\"\n            description=\"Confirm button text for verification\"\n          />\n        </Button>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (!message || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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"}

package/dist/cjs/lib/otp-input.cjs

@@ -10,9 +10,11 @@ react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/otp-input.tsx
 const OtpContext = react.createContext(void 0);
+OtpContext.displayName = "OtpContext";
+const OtpIndexContext = react.createContext(-1);
+OtpIndexContext.displayName = "OtpIndexContext";
 const Root = react.forwardRef(function Root({ name, id, value: valueProp, onValueChange, autoSubmit, children, readOnly, state, ...gridProps }, forwardedRef) {
 	const [lastCharIndex, setLastCharIndex] = react.useState(0);
-	const [allChildrenAdded, setAllChildrenAdded] = react.useState(false);
 	const childCount = react.Children.count(children);
 	const [value, setValueState] = react.useState(() => getValueAsArray(valueProp, childCount));
 	const [previousValueProp, setPreviousValueProp] = react.useState(valueProp);
@@ -36,13 +38,9 @@ const Root = react.forwardRef(function Root({ name, id, value: valueProp, onValu
 		autoSubmit
 	]);
 	const handleEnterPressed = react.useCallback(() => attemptAutoSubmit(true), [attemptAutoSubmit]);
-	const handleChildAdd = react.useCallback((input) => {
-		if (input) {
-			input.dataset.index = `${childrenRefs.current.length}`;
-			childrenRefs.current.push(input);
-		} else childrenRefs.current.pop();
-		if (childrenRefs.current.length === childCount) setAllChildrenAdded(true);
-	}, [childCount]);
+	const handleChildAdd = react.useCallback((element, index) => {
+		childrenRefs.current[index] = element;
+	}, []);
 	const handleCharChange = react.useCallback((char, index) => {
 		setValue((previousValue) => {
 			const newValue = [...previousValue];
@@ -55,18 +53,16 @@ const Root = react.forwardRef(function Root({ name, id, value: valueProp, onValu
 		value,
 		readOnly,
 		state,
-		allChildrenAdded,
 		onEnterPressed: handleEnterPressed,
-		onChildAdd: handleChildAdd,
-		onCharChange: handleCharChange
+		onCharChange: handleCharChange,
+		onChildAdd: handleChildAdd
 	}), [
 		value,
-		allChildrenAdded,
 		readOnly,
 		state,
 		handleEnterPressed,
-		handleChildAdd,
-		handleCharChange
+		handleCharChange,
+		handleChildAdd
 	]);
 	react.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OtpContext.Provider, {
@@ -83,7 +79,10 @@ const Root = react.forwardRef(function Root({ name, id, value: valueProp, onValu
 				const index = Math.min(sanitizedValue.length, childCount - 1);
 				childrenRefs.current?.[index]?.focus();
 			},
-			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			children: [react.Children.map(children, (child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OtpIndexContext.Provider, {
+				value: index,
+				children: child
+			})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref: require_lib_compose_refs.useComposedRefs(forwardedRef, hiddenInputRef),
 				defaultValue: value.join(""),
 				minLength: childCount,
@@ -95,9 +94,12 @@ const Root = react.forwardRef(function Root({ name, id, value: valueProp, onValu
 });
 const Input = react.forwardRef(function Input({ style, readOnly, autoComplete = "off", ...props }, forwardedRef) {
 	const otpContext = useOptContext();
-	const inputRef = react.useRef(null);
-	const composedInputRef = require_lib_compose_refs.useComposedRefs(forwardedRef, inputRef, otpContext.onChildAdd);
-	const index = Number(inputRef.current?.dataset.index ?? -1);
+	const { onChildAdd } = otpContext;
+	const index = react.useContext(OtpIndexContext);
+	const inputRef = react.useCallback((input) => {
+		onChildAdd(input, index);
+	}, [onChildAdd, index]);
+	const composedInputRef = require_lib_compose_refs.useComposedRefs(forwardedRef, inputRef);
 	const char = otpContext.value[index] ?? "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_form.Field, {
 		name: `otp-${index}`,
@@ -124,7 +126,6 @@ const Input = react.forwardRef(function Input({ style, readOnly, autoComplete =
 				onChange: (event) => {
 					if (event.target.validity.valid || event.target.value === "") {
 						const char = event.target.value;
-						const index = Number(event.target.dataset.index ?? -1);
 						otpContext.onCharChange(char, index);
 						focusSibling(event.currentTarget, { back: char === "" });
 					}

package/dist/cjs/lib/otp-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.cjs","names":["React","Grid","useComposedRefs","TextField"],"sources":["../../../src/lib/otp-input.tsx"],"sourcesContent":["\"use client\";\nimport { Grid } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { useComposedRefs } from \"./compose-refs.js\";\nimport { TextField } from \"./elements.js\";\nimport * as Form from \"./form.js\";\n\ninterface OptContextType {\n  value: string[];\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  onEnterPressed: () => void;\n  onChildAdd: (input: HTMLInputElement) => void;\n  onCharChange: (char: string, index: number) => void;\n  allChildrenAdded: boolean;\n}\n\nconst OtpContext = React.createContext<OptContextType | undefined>(undefined);\n\ntype OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {\n  id?: string;\n  name?: string;\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  value: string;\n  onValueChange: React.Dispatch<React.SetStateAction<string>>;\n  autoSubmit?: boolean;\n};\n\nexport const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(\n  function Root(\n    {\n      name,\n      id,\n      value: valueProp,\n      onValueChange,\n      autoSubmit,\n      children,\n      readOnly,\n      state,\n      ...gridProps\n    },\n    forwardedRef,\n  ) {\n    const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);\n    const [allChildrenAdded, setAllChildrenAdded] =\n      React.useState<boolean>(false);\n    const childCount = React.Children.count(children);\n\n    // Internal array state is the source of truth so that empty slots between\n    // filled digits are preserved. A `value` string can't encode a gap (e.g.\n    // `[\"1\", \"\", \"3\"]` and `[\"1\", \"3\"]` both serialize to \"13\"), so deriving\n    // state straight from the prop would shift digits whenever an inner box is\n    // cleared or filled out of order.\n    const [value, setValueState] = React.useState<string[]>(() =>\n      getValueAsArray(valueProp, childCount),\n    );\n\n    const [previousValueProp, setPreviousValueProp] = React.useState(valueProp);\n    if (previousValueProp !== valueProp) {\n      setPreviousValueProp(valueProp);\n      if (valueProp !== value.join(\"\")) {\n        setValueState(getValueAsArray(valueProp, childCount));\n      }\n    }\n\n    const setValue = React.useCallback(\n      (action: React.SetStateAction<string[]>) => {\n        const nextArrayValue =\n          typeof action === \"function\" ? action(value) : action;\n        setValueState(nextArrayValue);\n        onValueChange(nextArrayValue.join(\"\"));\n      },\n      [value, onValueChange],\n    );\n\n    const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n    const childrenRefs = React.useRef<HTMLInputElement[]>([]);\n\n    const attemptAutoSubmit = React.useCallback(\n      (enterPressed = false) => {\n        if (\n          autoSubmit &&\n          value.length > 0 &&\n          value.every((char) => char !== \"\") &&\n          (enterPressed || lastCharIndex + 1 === childCount)\n        ) {\n          hiddenInputRef.current?.form?.requestSubmit();\n        }\n      },\n      [value, childCount, lastCharIndex, autoSubmit],\n    );\n\n    const handleEnterPressed = React.useCallback(\n      () => attemptAutoSubmit(true),\n      [attemptAutoSubmit],\n    );\n\n    const handleChildAdd = React.useCallback(\n      (input: HTMLInputElement) => {\n        if (input) {\n          input.dataset.index = `${childrenRefs.current.length}`;\n          childrenRefs.current.push(input);\n        } else {\n          childrenRefs.current.pop();\n        }\n\n        if (childrenRefs.current.length === childCount) {\n          setAllChildrenAdded(true);\n        }\n      },\n      [childCount],\n    );\n\n    const handleCharChange = React.useCallback(\n      (char: string, index: number) => {\n        setValue((previousValue) => {\n          const newValue = [...previousValue];\n          newValue[index] = char;\n          return newValue;\n        });\n        setLastCharIndex(index);\n      },\n      [setValue],\n    );\n\n    const otpContext = React.useMemo(\n      () => ({\n        value,\n        readOnly,\n        state,\n        allChildrenAdded,\n        onEnterPressed: handleEnterPressed,\n        onChildAdd: handleChildAdd,\n        onCharChange: handleCharChange,\n      }),\n      [\n        value,\n        allChildrenAdded,\n        readOnly,\n        state,\n        handleEnterPressed,\n        handleChildAdd,\n        handleCharChange,\n      ],\n    );\n\n    React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);\n\n    return (\n      <OtpContext.Provider value={otpContext}>\n        <Grid\n          columns={`repeat(${childCount}, 1fr)`}\n          {...gridProps}\n          onPaste={(event: React.ClipboardEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            const pastedValue = event.clipboardData.getData(\"Text\");\n            const sanitizedValue = pastedValue\n              .replace(/[^\\d]/g, \"\")\n              .slice(0, childCount);\n            const value = sanitizedValue\n              .padEnd(childCount, \"#\")\n              .split(\"\")\n              .map((char) => (char === \"#\" ? \"\" : char));\n\n            setValue(value);\n            setLastCharIndex(sanitizedValue.length - 1);\n\n            const index = Math.min(sanitizedValue.length, childCount - 1);\n            childrenRefs.current?.[index]?.focus();\n          }}\n        >\n          {children}\n          <input\n            ref={useComposedRefs(forwardedRef, hiddenInputRef)}\n            defaultValue={value.join(\"\")}\n            minLength={childCount}\n            name={name}\n            type=\"hidden\"\n          />\n        </Grid>\n      </OtpContext.Provider>\n    );\n  },\n);\n\ninterface InputProps extends React.ComponentProps<typeof TextField> {\n  autoComplete?: \"one-time-code\" | \"off\";\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    { style, readOnly, autoComplete = \"off\", ...props },\n    forwardedRef,\n  ) {\n    const otpContext = useOptContext();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const composedInputRef = useComposedRefs(\n      forwardedRef,\n      inputRef,\n      otpContext.onChildAdd,\n    );\n\n    // FIXME: This should be refactored\n    // eslint-disable-next-line react-hooks/refs\n    const index = Number(inputRef.current?.dataset.index ?? -1);\n    const char = otpContext.value[index] ?? \"\";\n\n    return (\n      <Form.Field name={`otp-${index}`} asChild>\n        <Form.Control asChild>\n          <TextField\n            ref={composedInputRef}\n            autoComplete={index === 0 ? autoComplete : \"off\"}\n            color={otpContext.state === \"invalid\" ? \"red\" : undefined}\n            inputMode=\"numeric\"\n            maxLength={1}\n            pattern=\"\\d{1}\"\n            readOnly={readOnly ?? otpContext.readOnly}\n            size=\"3\"\n            value={char}\n            variant={otpContext.state === \"invalid\" ? \"soft\" : undefined}\n            style={{\n              ...style,\n              height: \"auto\",\n              \"--text-field-padding\": 0,\n              textAlign: \"center\",\n            }}\n            onChange={(event) => {\n              // Update the value if it matches the input pattern (number only) or is empty (backspace)\n              if (event.target.validity.valid || event.target.value === \"\") {\n                const char = event.target.value;\n                const index = Number(event.target.dataset.index ?? -1);\n                otpContext.onCharChange(char, index);\n                focusSibling(event.currentTarget, { back: char === \"\" });\n              }\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"ArrowLeft\") {\n                focusSibling(event.currentTarget, { back: true });\n                event.preventDefault();\n              } else if (event.key === \"ArrowRight\") {\n                focusSibling(event.currentTarget);\n                event.preventDefault();\n              } else if (event.key === \"Backspace\" && char === \"\") {\n                focusSibling(event.currentTarget, { back: true });\n              } else if (event.key === \"Enter\" && char !== \"\") {\n                otpContext.onEnterPressed();\n              }\n            }}\n            {...props}\n          />\n        </Form.Control>\n      </Form.Field>\n    );\n  },\n);\n\nconst useOptContext = () => {\n  const optContext = React.useContext(OtpContext);\n\n  if (!optContext) {\n    throw new Error(\n      \"OtpInput compound components cannot be rendered outside the OtpRoot component\",\n    );\n  }\n\n  return optContext;\n};\n\nfunction focusSibling(input: HTMLInputElement, { back = false } = {}) {\n  const sibling = back\n    ? input.parentElement?.previousSibling\n    : input.parentElement?.nextSibling;\n  const siblingInput = sibling?.firstChild;\n  if (siblingInput && siblingInput instanceof HTMLInputElement) {\n    siblingInput?.focus();\n    siblingInput?.select();\n  }\n}\n\nconst getValueAsArray = (value: string | undefined, length: number) => {\n  if (!value) {\n    return createEmptyArray(length);\n  }\n\n  return createEmptyArray(length).map((_, index) => value?.[index] ?? \"\");\n};\n\nconst createEmptyArray = (length: number): string[] =>\n  Array.from<string>({ length }).fill(\"\");\n"],"mappings":"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"}
+{"version":3,"file":"otp-input.cjs","names":["React","Grid","useComposedRefs","TextField"],"sources":["../../../src/lib/otp-input.tsx"],"sourcesContent":["\"use client\";\nimport { Grid } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { useComposedRefs } from \"./compose-refs.js\";\nimport { TextField } from \"./elements.js\";\nimport * as Form from \"./form.js\";\n\ninterface OptContextType {\n  value: string[];\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  onEnterPressed: () => void;\n  onCharChange: (char: string, index: number) => void;\n  onChildAdd: (element: HTMLInputElement | null, index: number) => void;\n}\n\nconst OtpContext = React.createContext<OptContextType | undefined>(undefined);\nOtpContext.displayName = \"OtpContext\";\n\nconst OtpIndexContext = React.createContext<number>(-1);\nOtpIndexContext.displayName = \"OtpIndexContext\";\n\ntype OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {\n  id?: string;\n  name?: string;\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  value: string;\n  onValueChange: React.Dispatch<React.SetStateAction<string>>;\n  autoSubmit?: boolean;\n};\n\nexport const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(\n  function Root(\n    {\n      name,\n      id,\n      value: valueProp,\n      onValueChange,\n      autoSubmit,\n      children,\n      readOnly,\n      state,\n      ...gridProps\n    },\n    forwardedRef,\n  ) {\n    const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);\n    const childCount = React.Children.count(children);\n\n    // Internal array state is the source of truth so that empty slots between\n    // filled digits are preserved. A `value` string can't encode a gap (e.g.\n    // `[\"1\", \"\", \"3\"]` and `[\"1\", \"3\"]` both serialize to \"13\"), so deriving\n    // state straight from the prop would shift digits whenever an inner box is\n    // cleared or filled out of order.\n    const [value, setValueState] = React.useState<string[]>(() =>\n      getValueAsArray(valueProp, childCount),\n    );\n\n    const [previousValueProp, setPreviousValueProp] = React.useState(valueProp);\n    if (previousValueProp !== valueProp) {\n      setPreviousValueProp(valueProp);\n      if (valueProp !== value.join(\"\")) {\n        setValueState(getValueAsArray(valueProp, childCount));\n      }\n    }\n\n    const setValue = React.useCallback(\n      (action: React.SetStateAction<string[]>) => {\n        const nextArrayValue =\n          typeof action === \"function\" ? action(value) : action;\n        setValueState(nextArrayValue);\n        onValueChange(nextArrayValue.join(\"\"));\n      },\n      [value, onValueChange],\n    );\n\n    const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n    const childrenRefs = React.useRef<(HTMLInputElement | null)[]>([]);\n\n    const attemptAutoSubmit = React.useCallback(\n      (enterPressed = false) => {\n        if (\n          autoSubmit &&\n          value.length > 0 &&\n          value.every((char) => char !== \"\") &&\n          (enterPressed || lastCharIndex + 1 === childCount)\n        ) {\n          hiddenInputRef.current?.form?.requestSubmit();\n        }\n      },\n      [value, childCount, lastCharIndex, autoSubmit],\n    );\n\n    const handleEnterPressed = React.useCallback(\n      () => attemptAutoSubmit(true),\n      [attemptAutoSubmit],\n    );\n\n    const handleChildAdd = React.useCallback(\n      (element: HTMLInputElement | null, index: number) => {\n        childrenRefs.current[index] = element;\n      },\n      [],\n    );\n\n    const handleCharChange = React.useCallback(\n      (char: string, index: number) => {\n        setValue((previousValue) => {\n          const newValue = [...previousValue];\n          newValue[index] = char;\n          return newValue;\n        });\n        setLastCharIndex(index);\n      },\n      [setValue],\n    );\n\n    const otpContext = React.useMemo<OptContextType>(\n      () =>\n        ({\n          value,\n          readOnly,\n          state,\n          onEnterPressed: handleEnterPressed,\n          onCharChange: handleCharChange,\n          onChildAdd: handleChildAdd,\n        }) satisfies OptContextType,\n      [\n        value,\n        readOnly,\n        state,\n        handleEnterPressed,\n        handleCharChange,\n        handleChildAdd,\n      ],\n    );\n\n    React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);\n\n    return (\n      <OtpContext.Provider value={otpContext}>\n        <Grid\n          columns={`repeat(${childCount}, 1fr)`}\n          {...gridProps}\n          onPaste={(event: React.ClipboardEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            const pastedValue = event.clipboardData.getData(\"Text\");\n            const sanitizedValue = pastedValue\n              .replace(/[^\\d]/g, \"\")\n              .slice(0, childCount);\n            const value = sanitizedValue\n              .padEnd(childCount, \"#\")\n              .split(\"\")\n              .map((char) => (char === \"#\" ? \"\" : char));\n\n            setValue(value);\n            setLastCharIndex(sanitizedValue.length - 1);\n\n            const index = Math.min(sanitizedValue.length, childCount - 1);\n            childrenRefs.current?.[index]?.focus();\n          }}\n        >\n          {React.Children.map(children, (child, index) => (\n            <OtpIndexContext.Provider value={index}>\n              {child}\n            </OtpIndexContext.Provider>\n          ))}\n          <input\n            ref={useComposedRefs(forwardedRef, hiddenInputRef)}\n            defaultValue={value.join(\"\")}\n            minLength={childCount}\n            name={name}\n            type=\"hidden\"\n          />\n        </Grid>\n      </OtpContext.Provider>\n    );\n  },\n);\n\ninterface InputProps extends React.ComponentProps<typeof TextField> {\n  autoComplete?: \"one-time-code\" | \"off\";\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    { style, readOnly, autoComplete = \"off\", ...props },\n    forwardedRef,\n  ) {\n    const otpContext = useOptContext();\n    const { onChildAdd } = otpContext;\n    const index = React.useContext(OtpIndexContext);\n    const inputRef = React.useCallback(\n      (input: HTMLInputElement | null) => {\n        onChildAdd(input, index);\n      },\n      [onChildAdd, index],\n    );\n    const composedInputRef = useComposedRefs(forwardedRef, inputRef);\n\n    const char = otpContext.value[index] ?? \"\";\n\n    return (\n      <Form.Field name={`otp-${index}`} asChild>\n        <Form.Control asChild>\n          <TextField\n            ref={composedInputRef}\n            autoComplete={index === 0 ? autoComplete : \"off\"}\n            color={otpContext.state === \"invalid\" ? \"red\" : undefined}\n            inputMode=\"numeric\"\n            maxLength={1}\n            pattern=\"\\d{1}\"\n            readOnly={readOnly ?? otpContext.readOnly}\n            size=\"3\"\n            value={char}\n            variant={otpContext.state === \"invalid\" ? \"soft\" : undefined}\n            style={{\n              ...style,\n              height: \"auto\",\n              \"--text-field-padding\": 0,\n              textAlign: \"center\",\n            }}\n            onChange={(event) => {\n              // Update the value if it matches the input pattern (number only) or is empty (backspace)\n              if (event.target.validity.valid || event.target.value === \"\") {\n                const char = event.target.value;\n                otpContext.onCharChange(char, index);\n                focusSibling(event.currentTarget, { back: char === \"\" });\n              }\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"ArrowLeft\") {\n                focusSibling(event.currentTarget, { back: true });\n                event.preventDefault();\n              } else if (event.key === \"ArrowRight\") {\n                focusSibling(event.currentTarget);\n                event.preventDefault();\n              } else if (event.key === \"Backspace\" && char === \"\") {\n                focusSibling(event.currentTarget, { back: true });\n              } else if (event.key === \"Enter\" && char !== \"\") {\n                otpContext.onEnterPressed();\n              }\n            }}\n            {...props}\n          />\n        </Form.Control>\n      </Form.Field>\n    );\n  },\n);\n\nconst useOptContext = () => {\n  const optContext = React.useContext(OtpContext);\n  if (!optContext) {\n    throw new Error(\n      \"OtpInput compound components cannot be rendered outside the OtpRoot component\",\n    );\n  }\n\n  return optContext;\n};\n\nfunction focusSibling(input: HTMLInputElement, { back = false } = {}) {\n  const sibling = back\n    ? input.parentElement?.previousSibling\n    : input.parentElement?.nextSibling;\n  const siblingInput = sibling?.firstChild;\n  if (siblingInput && siblingInput instanceof HTMLInputElement) {\n    siblingInput?.focus();\n    siblingInput?.select();\n  }\n}\n\nconst getValueAsArray = (value: string | undefined, length: number) => {\n  if (!value) {\n    return createEmptyArray(length);\n  }\n\n  return createEmptyArray(length).map((_, index) => value?.[index] ?? \"\");\n};\n\nconst createEmptyArray = (length: number): string[] =>\n  Array.from<string>({ length }).fill(\"\");\n"],"mappings":"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"}

package/dist/cjs/lib/otp-input.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.d.cts","names":["TextField"],"sources":["../../../src/lib/otp-input.tsx"],"mappings":";;;;KAmBK,eAAe,MAAM,gCAAgC;EACxD;EACA;EACA;EACA;EACA;EACA,eAAe,MAAM,SAAS,MAAM;EACpC;;qBAGW,MAAI,MAAA,0BAAA,eAAA,MAAA,cAAA;UA6JP,mBAAmB,MAAM,sBAAsBA;EACvD;;qBAGW,OAAK,MAAA,0BAAA,KAAA,qBAAA,MAAA,cAAA"}
+{"version":3,"file":"otp-input.d.cts","names":["TextField"],"sources":["../../../src/lib/otp-input.tsx"],"mappings":";;;;KAsBK,eAAe,MAAM,gCAAgC;EACxD;EACA;EACA;EACA;EACA;EACA,eAAe,MAAM,SAAS,MAAM;EACpC;;qBAGW,MAAI,MAAA,0BAAA,eAAA,MAAA,cAAA;UAqJP,mBAAmB,MAAM,sBAAsBA;EACvD;;qBAGW,OAAK,MAAA,0BAAA,KAAA,qBAAA,MAAA,cAAA"}

package/dist/cjs/lib/save-button.cjs

@@ -10,7 +10,13 @@ let _radix_ui_react_icons = require("@radix-ui/react-icons");
 const DONE_TIMEOUT_MS = 1500;
 const SAVING_TIMEOUT_MS = 600;
 function SaveButton({ asChild = false, children, loading, done, onDone, ...props }) {
-	const [state, setState] = (0, react.useState)(loading ? "loading" : done ? "done" : "idle");
+	const [minElapsed, setMinElapsed] = (0, react.useState)(!!done);
+	const [prevLoading, setPrevLoading] = (0, react.useState)(loading);
+	if (loading !== prevLoading) {
+		setPrevLoading(loading);
+		if (loading) setMinElapsed(false);
+	}
+	const state = loading ? "loading" : done ? minElapsed ? "done" : "loading" : "idle";
 	const loadingStartTime = (0, react.useRef)(null);
 	const onDoneRef = (0, react.useRef)(onDone);
 	const ButtonComponent = asChild ? _radix_ui_themes.Slot : require_lib_elements.Button;
@@ -19,24 +25,23 @@ function SaveButton({ asChild = false, children, loading, done, onDone, ...props
 	}, [onDone]);
 	(0, react.useEffect)(() => {
 		if (loading) {
-			setState("loading");
 			loadingStartTime.current = Date.now();
-		} else if (done) {
-			const currentTime = Date.now();
-			const loadingDuration = loadingStartTime.current ? currentTime - loadingStartTime.current : 0;
-			const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
-			let doneTimer = null;
-			const savedTimer = window.setTimeout(() => {
-				setState("done");
-				doneTimer = window.setTimeout(() => {
-					onDoneRef.current?.();
-				}, DONE_TIMEOUT_MS);
-			}, remainingDelay);
-			return () => {
-				window.clearTimeout(savedTimer);
-				if (doneTimer !== null) window.clearTimeout(doneTimer);
-			};
-		} else if (!loading && !done) setState("idle");
+			return;
+		}
+		if (!done) return;
+		const loadingDuration = loadingStartTime.current ? Date.now() - loadingStartTime.current : 0;
+		const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
+		let doneTimer = null;
+		const minElapsedTimer = window.setTimeout(() => {
+			setMinElapsed(true);
+			doneTimer = window.setTimeout(() => {
+				onDoneRef.current?.();
+			}, DONE_TIMEOUT_MS);
+		}, remainingDelay);
+		return () => {
+			window.clearTimeout(minElapsedTimer);
+			if (doneTimer !== null) window.clearTimeout(doneTimer);
+		};
 	}, [loading, done]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonComponent, {
 		...props,

package/dist/cjs/lib/save-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"save-button.cjs","names":["useState","useRef","Slot","Button","namespaceClassNames","Slottable","Flex","Spinner","CheckIcon","Text","Translation"],"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import { CheckIcon } from \"@radix-ui/react-icons\";\nimport { Flex, Slot, Slottable, Spinner, Text } from \"@radix-ui/themes\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"./elements.js\";\nimport type { ButtonProps } from \"./elements.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { namespaceClassNames } from \"./widget-dom-props.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  const [state, setState] = useState<\"idle\" | \"loading\" | \"done\">(\n    loading ? \"loading\" : done ? \"done\" : \"idle\",\n  );\n  const loadingStartTime = useRef<number | null>(null);\n  const onDoneRef = useRef(onDone);\n  const ButtonComponent = asChild ? Slot : Button;\n\n  useEffect(() => {\n    onDoneRef.current = onDone;\n  }, [onDone]);\n\n  useEffect(() => {\n    if (loading) {\n      // FIXME: This should be refactored\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setState(\"loading\");\n      loadingStartTime.current = Date.now();\n    } else if (done) {\n      const currentTime = Date.now();\n      const loadingDuration = loadingStartTime.current\n        ? currentTime - loadingStartTime.current\n        : 0;\n\n      // If loading lasted less than 500 ms, wait for the remaining time\n      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n      let doneTimer: number | null = null;\n      const savedTimer = window.setTimeout(() => {\n        setState(\"done\");\n\n        doneTimer = window.setTimeout(() => {\n          onDoneRef.current?.();\n        }, DONE_TIMEOUT_MS);\n      }, remainingDelay);\n\n      return () => {\n        window.clearTimeout(savedTimer);\n        if (doneTimer !== null) {\n          window.clearTimeout(doneTimer);\n        }\n      };\n    } else if (!loading && !done) {\n      setState(\"idle\");\n    }\n  }, [loading, done]);\n\n  return (\n    <ButtonComponent\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            <Translation\n              defaultMessage=\"Done\"\n              id=\"wjt0K3\"\n              description=\"Button label indicating an action has completed successfully\"\n            />\n          </Text>\n        </Flex>\n      )}\n    </ButtonComponent>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAU1B,SAAgB,WAAW,EACzB,UAAU,OACV,UACA,SACA,MACA,QACA,GAAG,SACe;CAClB,MAAM,CAAC,OAAO,aAAA,GAAYA,MAAAA,SAAAA,CACxB,UAAU,YAAY,OAAO,SAAS,MACxC;CACA,MAAM,oBAAA,GAAmBC,MAAAA,OAAAA,CAAsB,IAAI;CACnD,MAAM,aAAA,GAAYA,MAAAA,OAAAA,CAAO,MAAM;CAC/B,MAAM,kBAAkB,UAAUC,iBAAAA,OAAOC,qBAAAA;CAEzC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,UAAU,UAAU;CACtB,GAAG,CAAC,MAAM,CAAC;CAEX,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,SAAS;GAGX,SAAS,SAAS;GAClB,iBAAiB,UAAU,KAAK,IAAI;EACtC,OAAO,IAAI,MAAM;GACf,MAAM,cAAc,KAAK,IAAI;GAC7B,MAAM,kBAAkB,iBAAiB,UACrC,cAAc,iBAAiB,UAC/B;GAGJ,MAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;GAEtE,IAAI,YAA2B;GAC/B,MAAM,aAAa,OAAO,iBAAiB;IACzC,SAAS,MAAM;IAEf,YAAY,OAAO,iBAAiB;KAClC,UAAU,UAAU;IACtB,GAAG,eAAe;GACpB,GAAG,cAAc;GAEjB,aAAa;IACX,OAAO,aAAa,UAAU;IAC9B,IAAI,cAAc,MAChB,OAAO,aAAa,SAAS;GAEjC;EACF,OAAO,IAAI,CAAC,WAAW,CAAC,MACtB,SAAS,MAAM;CAEnB,GAAG,CAAC,SAAS,IAAI,CAAC;CAElB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,iBAAD;EACE,GAAI;EACJ,WAAWC,6BAAAA,oBAAoB,aAAa;EAC5C,mBAAiB;EAHnB,UAAA;GAKE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,WAAD,EAAY,SAAoB,CAAA;GAC/B,UAAU,aACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IAEN,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,SAAD,EAAS,MAAK,IAAK,CAAA;GACf,CAAA;GAGP,UAAU,UACT,iBAAA,GAAA,kBAAA,KAAA,CAACD,iBAAAA,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IACN,KAAI;IANN,UAAA,CAQE,iBAAA,GAAA,kBAAA,IAAA,CAACE,sBAAAA,WAAD;KACE,OAAM;KACN,QAAO;KACP,OAAO,EAAE,YAAY,OAAO;KAC5B,WAAWJ,6BAAAA,oBAAoB,wBAAwB;IACxD,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACK,iBAAAA,MAAD;KAAM,WAAWL,6BAAAA,oBAAoB,wBAAwB;KAC3D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACM,6BAAAA,aAAD;MACE,gBAAe;MACf,IAAG;MACH,aAAY;KACb,CAAA;IACG,CAAA,CACF;;EAEO;;AAErB"}
+{"version":3,"file":"save-button.cjs","names":["useState","useRef","Slot","Button","namespaceClassNames","Slottable","Flex","Spinner","CheckIcon","Text","Translation"],"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import { CheckIcon } from \"@radix-ui/react-icons\";\nimport { Flex, Slot, Slottable, Spinner, Text } from \"@radix-ui/themes\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"./elements.js\";\nimport type { ButtonProps } from \"./elements.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { namespaceClassNames } from \"./widget-dom-props.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  // Whether the spinner has been visible for at least SAVING_TIMEOUT_MS, so a\n  // fast response doesn't flash it for a single frame.\n  const [minElapsed, setMinElapsed] = useState(!!done);\n  const [prevLoading, setPrevLoading] = useState(loading);\n  if (loading !== prevLoading) {\n    setPrevLoading(loading);\n    if (loading) {\n      setMinElapsed(false);\n    }\n  }\n\n  const state = loading\n    ? \"loading\"\n    : done\n      ? minElapsed\n        ? \"done\"\n        : \"loading\"\n      : \"idle\";\n\n  const loadingStartTime = useRef<number | null>(null);\n  const onDoneRef = useRef(onDone);\n  const ButtonComponent = asChild ? Slot : Button;\n\n  useEffect(() => {\n    onDoneRef.current = onDone;\n  }, [onDone]);\n\n  useEffect(() => {\n    if (loading) {\n      loadingStartTime.current = Date.now();\n      return;\n    }\n    if (!done) {\n      return;\n    }\n\n    const loadingDuration = loadingStartTime.current\n      ? Date.now() - loadingStartTime.current\n      : 0;\n    const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n    let doneTimer: number | null = null;\n    const minElapsedTimer = window.setTimeout(() => {\n      setMinElapsed(true);\n\n      doneTimer = window.setTimeout(() => {\n        onDoneRef.current?.();\n      }, DONE_TIMEOUT_MS);\n    }, remainingDelay);\n\n    return () => {\n      window.clearTimeout(minElapsedTimer);\n      if (doneTimer !== null) {\n        window.clearTimeout(doneTimer);\n      }\n    };\n  }, [loading, done]);\n\n  return (\n    <ButtonComponent\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            <Translation\n              defaultMessage=\"Done\"\n              id=\"wjt0K3\"\n              description=\"Button label indicating an action has completed successfully\"\n            />\n          </Text>\n        </Flex>\n      )}\n    </ButtonComponent>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAU1B,SAAgB,WAAW,EACzB,UAAU,OACV,UACA,SACA,MACA,QACA,GAAG,SACe;CAGlB,MAAM,CAAC,YAAY,kBAAA,GAAiBA,MAAAA,SAAAA,CAAS,CAAC,CAAC,IAAI;CACnD,MAAM,CAAC,aAAa,mBAAA,GAAkBA,MAAAA,SAAAA,CAAS,OAAO;CACtD,IAAI,YAAY,aAAa;EAC3B,eAAe,OAAO;EACtB,IAAI,SACF,cAAc,KAAK;CAEvB;CAEA,MAAM,QAAQ,UACV,YACA,OACE,aACE,SACA,YACF;CAEN,MAAM,oBAAA,GAAmBC,MAAAA,OAAAA,CAAsB,IAAI;CACnD,MAAM,aAAA,GAAYA,MAAAA,OAAAA,CAAO,MAAM;CAC/B,MAAM,kBAAkB,UAAUC,iBAAAA,OAAOC,qBAAAA;CAEzC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,UAAU,UAAU;CACtB,GAAG,CAAC,MAAM,CAAC;CAEX,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,SAAS;GACX,iBAAiB,UAAU,KAAK,IAAI;GACpC;EACF;EACA,IAAI,CAAC,MACH;EAGF,MAAM,kBAAkB,iBAAiB,UACrC,KAAK,IAAI,IAAI,iBAAiB,UAC9B;EACJ,MAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;EAEtE,IAAI,YAA2B;EAC/B,MAAM,kBAAkB,OAAO,iBAAiB;GAC9C,cAAc,IAAI;GAElB,YAAY,OAAO,iBAAiB;IAClC,UAAU,UAAU;GACtB,GAAG,eAAe;EACpB,GAAG,cAAc;EAEjB,aAAa;GACX,OAAO,aAAa,eAAe;GACnC,IAAI,cAAc,MAChB,OAAO,aAAa,SAAS;EAEjC;CACF,GAAG,CAAC,SAAS,IAAI,CAAC;CAElB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,iBAAD;EACE,GAAI;EACJ,WAAWC,6BAAAA,oBAAoB,aAAa;EAC5C,mBAAiB;EAHnB,UAAA;GAKE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,WAAD,EAAY,SAAoB,CAAA;GAC/B,UAAU,aACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IAEN,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,SAAD,EAAS,MAAK,IAAK,CAAA;GACf,CAAA;GAGP,UAAU,UACT,iBAAA,GAAA,kBAAA,KAAA,CAACD,iBAAAA,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IACN,KAAI;IANN,UAAA,CAQE,iBAAA,GAAA,kBAAA,IAAA,CAACE,sBAAAA,WAAD;KACE,OAAM;KACN,QAAO;KACP,OAAO,EAAE,YAAY,OAAO;KAC5B,WAAWJ,6BAAAA,oBAAoB,wBAAwB;IACxD,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACK,iBAAAA,MAAD;KAAM,WAAWL,6BAAAA,oBAAoB,wBAAwB;KAC3D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACM,6BAAAA,aAAD;MACE,gBAAe;MACf,IAAG;MACH,aAAY;KACb,CAAA;IACG,CAAA,CACF;;EAEO;;AAErB"}

package/dist/esm/lib/compose-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"compose-refs.js","names":[],"sources":["../../../src/lib/compose-refs.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n  if (typeof ref === \"function\") {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup == \"function\") {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup == \"function\") {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { useComposedRefs };\n"],"mappings":";;;;;;AAQA,SAAS,OAAU,KAAqB,OAAU;CAChD,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,QACjC,IAAI,UAAU;AAElB;;;;;AAMA,SAAS,YAAe,GAAG,MAA8C;CACvE,QAAQ,SAAS;EACf,IAAI,aAAa;EACjB,MAAM,WAAW,KAAK,KAAK,QAAQ;GACjC,MAAM,UAAU,OAAO,KAAK,IAAI;GAChC,IAAI,CAAC,cAAc,OAAO,WAAW,YACnC,aAAa;GAEf,OAAO;EACT,CAAC;EAMD,IAAI,YACF,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,OAAO,WAAW,YACpB,QAAQ;SAER,OAAO,KAAK,IAAI,IAAI;GAExB;EACF;CAEJ;AACF;;;;;AAMA,SAAS,gBAAmB,GAAG,MAA8C;CAE3E,OAAO,MAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD"}
+{"version":3,"file":"compose-refs.js","names":[],"sources":["../../../src/lib/compose-refs.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n  if (typeof ref === \"function\") {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup == \"function\") {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup == \"function\") {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // oxlint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { useComposedRefs };\n"],"mappings":";;;;;;AAQA,SAAS,OAAU,KAAqB,OAAU;CAChD,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,QACjC,IAAI,UAAU;AAElB;;;;;AAMA,SAAS,YAAe,GAAG,MAA8C;CACvE,QAAQ,SAAS;EACf,IAAI,aAAa;EACjB,MAAM,WAAW,KAAK,KAAK,QAAQ;GACjC,MAAM,UAAU,OAAO,KAAK,IAAI;GAChC,IAAI,CAAC,cAAc,OAAO,WAAW,YACnC,aAAa;GAEf,OAAO;EACT,CAAC;EAMD,IAAI,YACF,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,OAAO,WAAW,YACpB,QAAQ;SAER,OAAO,KAAK,IAAI,IAAI;GAExB;EACF;CAEJ;AACF;;;;;AAMA,SAAS,gBAAmB,GAAG,MAA8C;CAE3E,OAAO,MAAM,YAAY,YAAY,GAAG,IAAI,GAAG,IAAI;AACrD"}

package/dist/esm/lib/elevated-access.js

@@ -9,17 +9,21 @@ import { expectResultMember } from "./client-graphql-result.js";
 import { Form } from "./form.js";
 import { Input, Root } from "./otp-input.js";
 import { Callout, Flex, Text } from "@radix-ui/themes";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/elevated-access.tsx
 function ElevatedAccess({ type = "dialog", children, onVerified }) {
 	const { elevatedAccess } = useElevatedAccessToken();
 	const [authenticationChallengeId, setAuthenticationChallengeId] = useState();
-	const prevAccessToken = useRef(elevatedAccess);
+	const [{ prevAccessToken, hasTokenExpired }, setPrevAccessState] = useState({
+		prevAccessToken: elevatedAccess,
+		hasTokenExpired: false
+	});
+	if (elevatedAccess !== prevAccessToken) setPrevAccessState({
+		prevAccessToken: elevatedAccess,
+		hasTokenExpired: hasTokenExpired || !!prevAccessToken && !elevatedAccess
+	});
 	const hasCalledOnVerified = useRef(false);
-	useEffect(() => {
-		prevAccessToken.current = elevatedAccess;
-	}, [elevatedAccess]);
 	const handleVerificationSuccess = useCallback((elevatedAccessToken) => {
 		setAuthenticationChallengeId(void 0);
 		if (!hasCalledOnVerified.current) {
@@ -28,16 +32,13 @@ function ElevatedAccess({ type = "dialog", children, onVerified }) {
 		}
 	}, [onVerified]);
 	if (elevatedAccess) return /* @__PURE__ */ jsx(Fragment, { children });
-	if (!authenticationChallengeId) {
-		const hasTokenExpired = !!prevAccessToken.current;
-		return /* @__PURE__ */ jsx(SendVerificationEmailForm, {
-			type,
-			hasTokenExpired,
-			onSuccess: (challengeId) => {
-				setAuthenticationChallengeId(challengeId);
-			}
-		});
-	}
+	if (!authenticationChallengeId) return /* @__PURE__ */ jsx(SendVerificationEmailForm, {
+		type,
+		hasTokenExpired,
+		onSuccess: (challengeId) => {
+			setAuthenticationChallengeId(challengeId);
+		}
+	});
 	if (authenticationChallengeId) return /* @__PURE__ */ jsx(VerificationIdentityForm, {
 		type,
 		authenticationChallengeId,

package/dist/esm/lib/elevated-access.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevated-access.js","names":["Title","Dialog.Title","AlertDialog.Title","Dialog.Description","AlertDialog.Description","Close","Dialog.Close","AlertDialog.Cancel","Button","Form.Root","Otp.Root","Otp.Input"],"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import { Callout, Flex, Text } from \"@radix-ui/themes\";\nimport type { PropsWithChildren } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { useClientGraphqlMutation } from \"../api/client-graphql/hooks.js\";\nimport { useMe } from \"./api/me.js\";\nimport { expectResultMember } from \"./client-graphql-result.js\";\nimport { AlertDialog, Button, Dialog } from \"./elements.js\";\nimport * as Form from \"./form.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport * as Otp from \"./otp-input.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: (elevatedAccessToken: string) => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const prevAccessToken = useRef(elevatedAccess);\n  const hasCalledOnVerified = useRef(false);\n\n  useEffect(() => {\n    prevAccessToken.current = elevatedAccess;\n  }, [elevatedAccess]);\n\n  const handleVerificationSuccess = useCallback(\n    (elevatedAccessToken: string) => {\n      setAuthenticationChallengeId(undefined);\n\n      // Only call onVerified on the initial verification, not on\n      // re-verifications after token expiry, so side effects (e.g. creating a\n      // new TOTP factor) don't re-run and discard the user's progress.\n      if (!hasCalledOnVerified.current) {\n        hasCalledOnVerified.current = true;\n        return onVerified?.(elevatedAccessToken);\n      }\n    },\n    [onVerified],\n  );\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    // FIXME: This should be refactored\n    // eslint-disable-next-line react-hooks/refs\n    const hasTokenExpired = !!prevAccessToken.current;\n\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={handleVerificationSuccess}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useClientGraphqlMutation({\n    mutationFn: async (sdk) =>\n      expectResultMember(\n        (await sdk.SendVerificationCode()).sendVerificationCode,\n        \"VerificationCodeSent\",\n      ),\n    onSuccess: (data) => onSuccess(data.authenticationChallengeId),\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired ? (\n          <Translation\n            defaultMessage=\"Your verification token has expired\"\n            id=\"lb/AsC\"\n            description=\"Dialog title when verification token has expired\"\n          />\n        ) : (\n          <Translation\n            defaultMessage=\"Verify your identity\"\n            id=\"7tGCOh\"\n            description=\"Dialog title for identity verification\"\n          />\n        )}\n      </Title>\n\n      <Description mb=\"5\">\n        <Translation\n          defaultMessage=\"To continue, we need to confirm your identity. We'll send a temporary verification code to {email}.\"\n          id=\"FTUSRM\"\n          description=\"Description explaining verification code will be sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button\n            variant=\"secondary\"\n            type=\"button\"\n            disabled={sendVerification.isPending}\n          >\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={sendVerification.isPending}>\n          <Translation\n            defaultMessage=\"Send verification code\"\n            id=\"XsTeXJ\"\n            description=\"Button text to send verification code\"\n          />\n        </Button>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: (elevatedAccessToken: string) => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useClientGraphqlMutation({\n    mutationFn: async (\n      sdk,\n      input: { code: string; authenticationChallengeId: string },\n    ) =>\n      expectResultMember(\n        (await sdk.VerifyCurrentEmail({ input })).verifyCurrentEmail,\n        \"CurrentEmailVerified\",\n      ),\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [otpValue, setOtpValue] = useState<string>(\"\");\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        code,\n        authenticationChallengeId,\n      });\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        expiresAt: newAuthState.expiresAt,\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess(newAuthState.elevatedAccessToken);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>\n        <Translation\n          defaultMessage=\"Verify your identity\"\n          id=\"7tGCOh\"\n          description=\"Dialog title for identity verification\"\n        />\n      </Title>\n\n      <Description>\n        <Translation\n          defaultMessage=\"A verification code was sent to {email}. Please enter it below.\"\n          id=\"kvxE0S\"\n          description=\"Description explaining where verification code was sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\n          value={otpValue}\n          onValueChange={setOtpValue}\n        >\n          <Otp.Input required autoFocus autoComplete=\"off\" />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n        </Otp.Root>\n\n        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button variant=\"secondary\" type=\"button\">\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={isSubmitting}>\n          <Translation\n            defaultMessage=\"Confirm\"\n            id=\"EmYENK\"\n            description=\"Confirm button text for verification\"\n          />\n        </Button>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (!message || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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"}
+{"version":3,"file":"elevated-access.js","names":["Title","Dialog.Title","AlertDialog.Title","Dialog.Description","AlertDialog.Description","Close","Dialog.Close","AlertDialog.Cancel","Button","Form.Root","Otp.Root","Otp.Input"],"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import { Callout, Flex, Text } from \"@radix-ui/themes\";\nimport type { PropsWithChildren } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { useClientGraphqlMutation } from \"../api/client-graphql/hooks.js\";\nimport { useMe } from \"./api/me.js\";\nimport { expectResultMember } from \"./client-graphql-result.js\";\nimport { AlertDialog, Button, Dialog } from \"./elements.js\";\nimport * as Form from \"./form.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport * as Otp from \"./otp-input.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: (elevatedAccessToken: string) => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const [{ prevAccessToken, hasTokenExpired }, setPrevAccessState] = useState({\n    prevAccessToken: elevatedAccess,\n    hasTokenExpired: false,\n  });\n  if (elevatedAccess !== prevAccessToken) {\n    setPrevAccessState({\n      prevAccessToken: elevatedAccess,\n      hasTokenExpired:\n        hasTokenExpired || (!!prevAccessToken && !elevatedAccess),\n    });\n  }\n\n  const hasCalledOnVerified = useRef(false);\n\n  const handleVerificationSuccess = useCallback(\n    (elevatedAccessToken: string) => {\n      setAuthenticationChallengeId(undefined);\n\n      // Only call onVerified on the initial verification, not on\n      // re-verifications after token expiry, so side effects (e.g. creating a\n      // new TOTP factor) don't re-run and discard the user's progress.\n      if (!hasCalledOnVerified.current) {\n        hasCalledOnVerified.current = true;\n        return onVerified?.(elevatedAccessToken);\n      }\n    },\n    [onVerified],\n  );\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={handleVerificationSuccess}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useClientGraphqlMutation({\n    mutationFn: async (sdk) =>\n      expectResultMember(\n        (await sdk.SendVerificationCode()).sendVerificationCode,\n        \"VerificationCodeSent\",\n      ),\n    onSuccess: (data) => onSuccess(data.authenticationChallengeId),\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired ? (\n          <Translation\n            defaultMessage=\"Your verification token has expired\"\n            id=\"lb/AsC\"\n            description=\"Dialog title when verification token has expired\"\n          />\n        ) : (\n          <Translation\n            defaultMessage=\"Verify your identity\"\n            id=\"7tGCOh\"\n            description=\"Dialog title for identity verification\"\n          />\n        )}\n      </Title>\n\n      <Description mb=\"5\">\n        <Translation\n          defaultMessage=\"To continue, we need to confirm your identity. We'll send a temporary verification code to {email}.\"\n          id=\"FTUSRM\"\n          description=\"Description explaining verification code will be sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button\n            variant=\"secondary\"\n            type=\"button\"\n            disabled={sendVerification.isPending}\n          >\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={sendVerification.isPending}>\n          <Translation\n            defaultMessage=\"Send verification code\"\n            id=\"XsTeXJ\"\n            description=\"Button text to send verification code\"\n          />\n        </Button>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: (elevatedAccessToken: string) => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useClientGraphqlMutation({\n    mutationFn: async (\n      sdk,\n      input: { code: string; authenticationChallengeId: string },\n    ) =>\n      expectResultMember(\n        (await sdk.VerifyCurrentEmail({ input })).verifyCurrentEmail,\n        \"CurrentEmailVerified\",\n      ),\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [otpValue, setOtpValue] = useState<string>(\"\");\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        code,\n        authenticationChallengeId,\n      });\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        expiresAt: newAuthState.expiresAt,\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess(newAuthState.elevatedAccessToken);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>\n        <Translation\n          defaultMessage=\"Verify your identity\"\n          id=\"7tGCOh\"\n          description=\"Dialog title for identity verification\"\n        />\n      </Title>\n\n      <Description>\n        <Translation\n          defaultMessage=\"A verification code was sent to {email}. Please enter it below.\"\n          id=\"kvxE0S\"\n          description=\"Description explaining where verification code was sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\n          value={otpValue}\n          onValueChange={setOtpValue}\n        >\n          <Otp.Input required autoFocus autoComplete=\"off\" />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n        </Otp.Root>\n\n        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button variant=\"secondary\" type=\"button\">\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={isSubmitting}>\n          <Translation\n            defaultMessage=\"Confirm\"\n            id=\"EmYENK\"\n            description=\"Confirm button text for verification\"\n          />\n        </Button>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (!message || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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"}

package/dist/esm/lib/otp-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.d.ts","names":["TextField"],"sources":["../../../src/lib/otp-input.tsx"],"mappings":";;;;KAmBK,eAAe,MAAM,gCAAgC;EACxD;EACA;EACA;EACA;EACA;EACA,eAAe,MAAM,SAAS,MAAM;EACpC;;qBAGW,MAAI,MAAA,0BAAA,eAAA,MAAA,cAAA;UA6JP,mBAAmB,MAAM,sBAAsBA;EACvD;;qBAGW,OAAK,MAAA,0BAAA,KAAA,qBAAA,MAAA,cAAA"}
+{"version":3,"file":"otp-input.d.ts","names":["TextField"],"sources":["../../../src/lib/otp-input.tsx"],"mappings":";;;;KAsBK,eAAe,MAAM,gCAAgC;EACxD;EACA;EACA;EACA;EACA;EACA,eAAe,MAAM,SAAS,MAAM;EACpC;;qBAGW,MAAI,MAAA,0BAAA,eAAA,MAAA,cAAA;UAqJP,mBAAmB,MAAM,sBAAsBA;EACvD;;qBAGW,OAAK,MAAA,0BAAA,KAAA,qBAAA,MAAA,cAAA"}

package/dist/esm/lib/otp-input.js

@@ -7,9 +7,11 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/otp-input.tsx
 const OtpContext = React.createContext(void 0);
+OtpContext.displayName = "OtpContext";
+const OtpIndexContext = React.createContext(-1);
+OtpIndexContext.displayName = "OtpIndexContext";
 const Root = React.forwardRef(function Root({ name, id, value: valueProp, onValueChange, autoSubmit, children, readOnly, state, ...gridProps }, forwardedRef) {
 	const [lastCharIndex, setLastCharIndex] = React.useState(0);
-	const [allChildrenAdded, setAllChildrenAdded] = React.useState(false);
 	const childCount = React.Children.count(children);
 	const [value, setValueState] = React.useState(() => getValueAsArray(valueProp, childCount));
 	const [previousValueProp, setPreviousValueProp] = React.useState(valueProp);
@@ -33,13 +35,9 @@ const Root = React.forwardRef(function Root({ name, id, value: valueProp, onValu
 		autoSubmit
 	]);
 	const handleEnterPressed = React.useCallback(() => attemptAutoSubmit(true), [attemptAutoSubmit]);
-	const handleChildAdd = React.useCallback((input) => {
-		if (input) {
-			input.dataset.index = `${childrenRefs.current.length}`;
-			childrenRefs.current.push(input);
-		} else childrenRefs.current.pop();
-		if (childrenRefs.current.length === childCount) setAllChildrenAdded(true);
-	}, [childCount]);
+	const handleChildAdd = React.useCallback((element, index) => {
+		childrenRefs.current[index] = element;
+	}, []);
 	const handleCharChange = React.useCallback((char, index) => {
 		setValue((previousValue) => {
 			const newValue = [...previousValue];
@@ -52,18 +50,16 @@ const Root = React.forwardRef(function Root({ name, id, value: valueProp, onValu
 		value,
 		readOnly,
 		state,
-		allChildrenAdded,
 		onEnterPressed: handleEnterPressed,
-		onChildAdd: handleChildAdd,
-		onCharChange: handleCharChange
+		onCharChange: handleCharChange,
+		onChildAdd: handleChildAdd
 	}), [
 		value,
-		allChildrenAdded,
 		readOnly,
 		state,
 		handleEnterPressed,
-		handleChildAdd,
-		handleCharChange
+		handleCharChange,
+		handleChildAdd
 	]);
 	React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);
 	return /* @__PURE__ */ jsx(OtpContext.Provider, {
@@ -80,7 +76,10 @@ const Root = React.forwardRef(function Root({ name, id, value: valueProp, onValu
 				const index = Math.min(sanitizedValue.length, childCount - 1);
 				childrenRefs.current?.[index]?.focus();
 			},
-			children: [children, /* @__PURE__ */ jsx("input", {
+			children: [React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(OtpIndexContext.Provider, {
+				value: index,
+				children: child
+			})), /* @__PURE__ */ jsx("input", {
 				ref: useComposedRefs(forwardedRef, hiddenInputRef),
 				defaultValue: value.join(""),
 				minLength: childCount,
@@ -92,9 +91,12 @@ const Root = React.forwardRef(function Root({ name, id, value: valueProp, onValu
 });
 const Input = React.forwardRef(function Input({ style, readOnly, autoComplete = "off", ...props }, forwardedRef) {
 	const otpContext = useOptContext();
-	const inputRef = React.useRef(null);
-	const composedInputRef = useComposedRefs(forwardedRef, inputRef, otpContext.onChildAdd);
-	const index = Number(inputRef.current?.dataset.index ?? -1);
+	const { onChildAdd } = otpContext;
+	const index = React.useContext(OtpIndexContext);
+	const inputRef = React.useCallback((input) => {
+		onChildAdd(input, index);
+	}, [onChildAdd, index]);
+	const composedInputRef = useComposedRefs(forwardedRef, inputRef);
 	const char = otpContext.value[index] ?? "";
 	return /* @__PURE__ */ jsx(FormField, {
 		name: `otp-${index}`,
@@ -121,7 +123,6 @@ const Input = React.forwardRef(function Input({ style, readOnly, autoComplete =
 				onChange: (event) => {
 					if (event.target.validity.valid || event.target.value === "") {
 						const char = event.target.value;
-						const index = Number(event.target.dataset.index ?? -1);
 						otpContext.onCharChange(char, index);
 						focusSibling(event.currentTarget, { back: char === "" });
 					}

package/dist/esm/lib/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","names":["Form.Field","Form.Control","TextField"],"sources":["../../../src/lib/otp-input.tsx"],"sourcesContent":["\"use client\";\nimport { Grid } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { useComposedRefs } from \"./compose-refs.js\";\nimport { TextField } from \"./elements.js\";\nimport * as Form from \"./form.js\";\n\ninterface OptContextType {\n  value: string[];\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  onEnterPressed: () => void;\n  onChildAdd: (input: HTMLInputElement) => void;\n  onCharChange: (char: string, index: number) => void;\n  allChildrenAdded: boolean;\n}\n\nconst OtpContext = React.createContext<OptContextType | undefined>(undefined);\n\ntype OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {\n  id?: string;\n  name?: string;\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  value: string;\n  onValueChange: React.Dispatch<React.SetStateAction<string>>;\n  autoSubmit?: boolean;\n};\n\nexport const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(\n  function Root(\n    {\n      name,\n      id,\n      value: valueProp,\n      onValueChange,\n      autoSubmit,\n      children,\n      readOnly,\n      state,\n      ...gridProps\n    },\n    forwardedRef,\n  ) {\n    const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);\n    const [allChildrenAdded, setAllChildrenAdded] =\n      React.useState<boolean>(false);\n    const childCount = React.Children.count(children);\n\n    // Internal array state is the source of truth so that empty slots between\n    // filled digits are preserved. A `value` string can't encode a gap (e.g.\n    // `[\"1\", \"\", \"3\"]` and `[\"1\", \"3\"]` both serialize to \"13\"), so deriving\n    // state straight from the prop would shift digits whenever an inner box is\n    // cleared or filled out of order.\n    const [value, setValueState] = React.useState<string[]>(() =>\n      getValueAsArray(valueProp, childCount),\n    );\n\n    const [previousValueProp, setPreviousValueProp] = React.useState(valueProp);\n    if (previousValueProp !== valueProp) {\n      setPreviousValueProp(valueProp);\n      if (valueProp !== value.join(\"\")) {\n        setValueState(getValueAsArray(valueProp, childCount));\n      }\n    }\n\n    const setValue = React.useCallback(\n      (action: React.SetStateAction<string[]>) => {\n        const nextArrayValue =\n          typeof action === \"function\" ? action(value) : action;\n        setValueState(nextArrayValue);\n        onValueChange(nextArrayValue.join(\"\"));\n      },\n      [value, onValueChange],\n    );\n\n    const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n    const childrenRefs = React.useRef<HTMLInputElement[]>([]);\n\n    const attemptAutoSubmit = React.useCallback(\n      (enterPressed = false) => {\n        if (\n          autoSubmit &&\n          value.length > 0 &&\n          value.every((char) => char !== \"\") &&\n          (enterPressed || lastCharIndex + 1 === childCount)\n        ) {\n          hiddenInputRef.current?.form?.requestSubmit();\n        }\n      },\n      [value, childCount, lastCharIndex, autoSubmit],\n    );\n\n    const handleEnterPressed = React.useCallback(\n      () => attemptAutoSubmit(true),\n      [attemptAutoSubmit],\n    );\n\n    const handleChildAdd = React.useCallback(\n      (input: HTMLInputElement) => {\n        if (input) {\n          input.dataset.index = `${childrenRefs.current.length}`;\n          childrenRefs.current.push(input);\n        } else {\n          childrenRefs.current.pop();\n        }\n\n        if (childrenRefs.current.length === childCount) {\n          setAllChildrenAdded(true);\n        }\n      },\n      [childCount],\n    );\n\n    const handleCharChange = React.useCallback(\n      (char: string, index: number) => {\n        setValue((previousValue) => {\n          const newValue = [...previousValue];\n          newValue[index] = char;\n          return newValue;\n        });\n        setLastCharIndex(index);\n      },\n      [setValue],\n    );\n\n    const otpContext = React.useMemo(\n      () => ({\n        value,\n        readOnly,\n        state,\n        allChildrenAdded,\n        onEnterPressed: handleEnterPressed,\n        onChildAdd: handleChildAdd,\n        onCharChange: handleCharChange,\n      }),\n      [\n        value,\n        allChildrenAdded,\n        readOnly,\n        state,\n        handleEnterPressed,\n        handleChildAdd,\n        handleCharChange,\n      ],\n    );\n\n    React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);\n\n    return (\n      <OtpContext.Provider value={otpContext}>\n        <Grid\n          columns={`repeat(${childCount}, 1fr)`}\n          {...gridProps}\n          onPaste={(event: React.ClipboardEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            const pastedValue = event.clipboardData.getData(\"Text\");\n            const sanitizedValue = pastedValue\n              .replace(/[^\\d]/g, \"\")\n              .slice(0, childCount);\n            const value = sanitizedValue\n              .padEnd(childCount, \"#\")\n              .split(\"\")\n              .map((char) => (char === \"#\" ? \"\" : char));\n\n            setValue(value);\n            setLastCharIndex(sanitizedValue.length - 1);\n\n            const index = Math.min(sanitizedValue.length, childCount - 1);\n            childrenRefs.current?.[index]?.focus();\n          }}\n        >\n          {children}\n          <input\n            ref={useComposedRefs(forwardedRef, hiddenInputRef)}\n            defaultValue={value.join(\"\")}\n            minLength={childCount}\n            name={name}\n            type=\"hidden\"\n          />\n        </Grid>\n      </OtpContext.Provider>\n    );\n  },\n);\n\ninterface InputProps extends React.ComponentProps<typeof TextField> {\n  autoComplete?: \"one-time-code\" | \"off\";\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    { style, readOnly, autoComplete = \"off\", ...props },\n    forwardedRef,\n  ) {\n    const otpContext = useOptContext();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const composedInputRef = useComposedRefs(\n      forwardedRef,\n      inputRef,\n      otpContext.onChildAdd,\n    );\n\n    // FIXME: This should be refactored\n    // eslint-disable-next-line react-hooks/refs\n    const index = Number(inputRef.current?.dataset.index ?? -1);\n    const char = otpContext.value[index] ?? \"\";\n\n    return (\n      <Form.Field name={`otp-${index}`} asChild>\n        <Form.Control asChild>\n          <TextField\n            ref={composedInputRef}\n            autoComplete={index === 0 ? autoComplete : \"off\"}\n            color={otpContext.state === \"invalid\" ? \"red\" : undefined}\n            inputMode=\"numeric\"\n            maxLength={1}\n            pattern=\"\\d{1}\"\n            readOnly={readOnly ?? otpContext.readOnly}\n            size=\"3\"\n            value={char}\n            variant={otpContext.state === \"invalid\" ? \"soft\" : undefined}\n            style={{\n              ...style,\n              height: \"auto\",\n              \"--text-field-padding\": 0,\n              textAlign: \"center\",\n            }}\n            onChange={(event) => {\n              // Update the value if it matches the input pattern (number only) or is empty (backspace)\n              if (event.target.validity.valid || event.target.value === \"\") {\n                const char = event.target.value;\n                const index = Number(event.target.dataset.index ?? -1);\n                otpContext.onCharChange(char, index);\n                focusSibling(event.currentTarget, { back: char === \"\" });\n              }\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"ArrowLeft\") {\n                focusSibling(event.currentTarget, { back: true });\n                event.preventDefault();\n              } else if (event.key === \"ArrowRight\") {\n                focusSibling(event.currentTarget);\n                event.preventDefault();\n              } else if (event.key === \"Backspace\" && char === \"\") {\n                focusSibling(event.currentTarget, { back: true });\n              } else if (event.key === \"Enter\" && char !== \"\") {\n                otpContext.onEnterPressed();\n              }\n            }}\n            {...props}\n          />\n        </Form.Control>\n      </Form.Field>\n    );\n  },\n);\n\nconst useOptContext = () => {\n  const optContext = React.useContext(OtpContext);\n\n  if (!optContext) {\n    throw new Error(\n      \"OtpInput compound components cannot be rendered outside the OtpRoot component\",\n    );\n  }\n\n  return optContext;\n};\n\nfunction focusSibling(input: HTMLInputElement, { back = false } = {}) {\n  const sibling = back\n    ? input.parentElement?.previousSibling\n    : input.parentElement?.nextSibling;\n  const siblingInput = sibling?.firstChild;\n  if (siblingInput && siblingInput instanceof HTMLInputElement) {\n    siblingInput?.focus();\n    siblingInput?.select();\n  }\n}\n\nconst getValueAsArray = (value: string | undefined, length: number) => {\n  if (!value) {\n    return createEmptyArray(length);\n  }\n\n  return createEmptyArray(length).map((_, index) => value?.[index] ?? \"\");\n};\n\nconst createEmptyArray = (length: number): string[] =>\n  Array.from<string>({ length }).fill(\"\");\n"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","names":["Form.Field","Form.Control","TextField"],"sources":["../../../src/lib/otp-input.tsx"],"sourcesContent":["\"use client\";\nimport { Grid } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { useComposedRefs } from \"./compose-refs.js\";\nimport { TextField } from \"./elements.js\";\nimport * as Form from \"./form.js\";\n\ninterface OptContextType {\n  value: string[];\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  onEnterPressed: () => void;\n  onCharChange: (char: string, index: number) => void;\n  onChildAdd: (element: HTMLInputElement | null, index: number) => void;\n}\n\nconst OtpContext = React.createContext<OptContextType | undefined>(undefined);\nOtpContext.displayName = \"OtpContext\";\n\nconst OtpIndexContext = React.createContext<number>(-1);\nOtpIndexContext.displayName = \"OtpIndexContext\";\n\ntype OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {\n  id?: string;\n  name?: string;\n  readOnly?: boolean;\n  state?: \"valid\" | \"invalid\";\n  value: string;\n  onValueChange: React.Dispatch<React.SetStateAction<string>>;\n  autoSubmit?: boolean;\n};\n\nexport const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(\n  function Root(\n    {\n      name,\n      id,\n      value: valueProp,\n      onValueChange,\n      autoSubmit,\n      children,\n      readOnly,\n      state,\n      ...gridProps\n    },\n    forwardedRef,\n  ) {\n    const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);\n    const childCount = React.Children.count(children);\n\n    // Internal array state is the source of truth so that empty slots between\n    // filled digits are preserved. A `value` string can't encode a gap (e.g.\n    // `[\"1\", \"\", \"3\"]` and `[\"1\", \"3\"]` both serialize to \"13\"), so deriving\n    // state straight from the prop would shift digits whenever an inner box is\n    // cleared or filled out of order.\n    const [value, setValueState] = React.useState<string[]>(() =>\n      getValueAsArray(valueProp, childCount),\n    );\n\n    const [previousValueProp, setPreviousValueProp] = React.useState(valueProp);\n    if (previousValueProp !== valueProp) {\n      setPreviousValueProp(valueProp);\n      if (valueProp !== value.join(\"\")) {\n        setValueState(getValueAsArray(valueProp, childCount));\n      }\n    }\n\n    const setValue = React.useCallback(\n      (action: React.SetStateAction<string[]>) => {\n        const nextArrayValue =\n          typeof action === \"function\" ? action(value) : action;\n        setValueState(nextArrayValue);\n        onValueChange(nextArrayValue.join(\"\"));\n      },\n      [value, onValueChange],\n    );\n\n    const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n    const childrenRefs = React.useRef<(HTMLInputElement | null)[]>([]);\n\n    const attemptAutoSubmit = React.useCallback(\n      (enterPressed = false) => {\n        if (\n          autoSubmit &&\n          value.length > 0 &&\n          value.every((char) => char !== \"\") &&\n          (enterPressed || lastCharIndex + 1 === childCount)\n        ) {\n          hiddenInputRef.current?.form?.requestSubmit();\n        }\n      },\n      [value, childCount, lastCharIndex, autoSubmit],\n    );\n\n    const handleEnterPressed = React.useCallback(\n      () => attemptAutoSubmit(true),\n      [attemptAutoSubmit],\n    );\n\n    const handleChildAdd = React.useCallback(\n      (element: HTMLInputElement | null, index: number) => {\n        childrenRefs.current[index] = element;\n      },\n      [],\n    );\n\n    const handleCharChange = React.useCallback(\n      (char: string, index: number) => {\n        setValue((previousValue) => {\n          const newValue = [...previousValue];\n          newValue[index] = char;\n          return newValue;\n        });\n        setLastCharIndex(index);\n      },\n      [setValue],\n    );\n\n    const otpContext = React.useMemo<OptContextType>(\n      () =>\n        ({\n          value,\n          readOnly,\n          state,\n          onEnterPressed: handleEnterPressed,\n          onCharChange: handleCharChange,\n          onChildAdd: handleChildAdd,\n        }) satisfies OptContextType,\n      [\n        value,\n        readOnly,\n        state,\n        handleEnterPressed,\n        handleCharChange,\n        handleChildAdd,\n      ],\n    );\n\n    React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);\n\n    return (\n      <OtpContext.Provider value={otpContext}>\n        <Grid\n          columns={`repeat(${childCount}, 1fr)`}\n          {...gridProps}\n          onPaste={(event: React.ClipboardEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            const pastedValue = event.clipboardData.getData(\"Text\");\n            const sanitizedValue = pastedValue\n              .replace(/[^\\d]/g, \"\")\n              .slice(0, childCount);\n            const value = sanitizedValue\n              .padEnd(childCount, \"#\")\n              .split(\"\")\n              .map((char) => (char === \"#\" ? \"\" : char));\n\n            setValue(value);\n            setLastCharIndex(sanitizedValue.length - 1);\n\n            const index = Math.min(sanitizedValue.length, childCount - 1);\n            childrenRefs.current?.[index]?.focus();\n          }}\n        >\n          {React.Children.map(children, (child, index) => (\n            <OtpIndexContext.Provider value={index}>\n              {child}\n            </OtpIndexContext.Provider>\n          ))}\n          <input\n            ref={useComposedRefs(forwardedRef, hiddenInputRef)}\n            defaultValue={value.join(\"\")}\n            minLength={childCount}\n            name={name}\n            type=\"hidden\"\n          />\n        </Grid>\n      </OtpContext.Provider>\n    );\n  },\n);\n\ninterface InputProps extends React.ComponentProps<typeof TextField> {\n  autoComplete?: \"one-time-code\" | \"off\";\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    { style, readOnly, autoComplete = \"off\", ...props },\n    forwardedRef,\n  ) {\n    const otpContext = useOptContext();\n    const { onChildAdd } = otpContext;\n    const index = React.useContext(OtpIndexContext);\n    const inputRef = React.useCallback(\n      (input: HTMLInputElement | null) => {\n        onChildAdd(input, index);\n      },\n      [onChildAdd, index],\n    );\n    const composedInputRef = useComposedRefs(forwardedRef, inputRef);\n\n    const char = otpContext.value[index] ?? \"\";\n\n    return (\n      <Form.Field name={`otp-${index}`} asChild>\n        <Form.Control asChild>\n          <TextField\n            ref={composedInputRef}\n            autoComplete={index === 0 ? autoComplete : \"off\"}\n            color={otpContext.state === \"invalid\" ? \"red\" : undefined}\n            inputMode=\"numeric\"\n            maxLength={1}\n            pattern=\"\\d{1}\"\n            readOnly={readOnly ?? otpContext.readOnly}\n            size=\"3\"\n            value={char}\n            variant={otpContext.state === \"invalid\" ? \"soft\" : undefined}\n            style={{\n              ...style,\n              height: \"auto\",\n              \"--text-field-padding\": 0,\n              textAlign: \"center\",\n            }}\n            onChange={(event) => {\n              // Update the value if it matches the input pattern (number only) or is empty (backspace)\n              if (event.target.validity.valid || event.target.value === \"\") {\n                const char = event.target.value;\n                otpContext.onCharChange(char, index);\n                focusSibling(event.currentTarget, { back: char === \"\" });\n              }\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"ArrowLeft\") {\n                focusSibling(event.currentTarget, { back: true });\n                event.preventDefault();\n              } else if (event.key === \"ArrowRight\") {\n                focusSibling(event.currentTarget);\n                event.preventDefault();\n              } else if (event.key === \"Backspace\" && char === \"\") {\n                focusSibling(event.currentTarget, { back: true });\n              } else if (event.key === \"Enter\" && char !== \"\") {\n                otpContext.onEnterPressed();\n              }\n            }}\n            {...props}\n          />\n        </Form.Control>\n      </Form.Field>\n    );\n  },\n);\n\nconst useOptContext = () => {\n  const optContext = React.useContext(OtpContext);\n  if (!optContext) {\n    throw new Error(\n      \"OtpInput compound components cannot be rendered outside the OtpRoot component\",\n    );\n  }\n\n  return optContext;\n};\n\nfunction focusSibling(input: HTMLInputElement, { back = false } = {}) {\n  const sibling = back\n    ? input.parentElement?.previousSibling\n    : input.parentElement?.nextSibling;\n  const siblingInput = sibling?.firstChild;\n  if (siblingInput && siblingInput instanceof HTMLInputElement) {\n    siblingInput?.focus();\n    siblingInput?.select();\n  }\n}\n\nconst getValueAsArray = (value: string | undefined, length: number) => {\n  if (!value) {\n    return createEmptyArray(length);\n  }\n\n  return createEmptyArray(length).map((_, index) => value?.[index] ?? \"\");\n};\n\nconst createEmptyArray = (length: number): string[] =>\n  Array.from<string>({ length }).fill(\"\");\n"],"mappings":"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"}

package/dist/esm/lib/save-button.js

@@ -9,7 +9,13 @@ import { CheckIcon } from "@radix-ui/react-icons";
 const DONE_TIMEOUT_MS = 1500;
 const SAVING_TIMEOUT_MS = 600;
 function SaveButton({ asChild = false, children, loading, done, onDone, ...props }) {
-	const [state, setState] = useState(loading ? "loading" : done ? "done" : "idle");
+	const [minElapsed, setMinElapsed] = useState(!!done);
+	const [prevLoading, setPrevLoading] = useState(loading);
+	if (loading !== prevLoading) {
+		setPrevLoading(loading);
+		if (loading) setMinElapsed(false);
+	}
+	const state = loading ? "loading" : done ? minElapsed ? "done" : "loading" : "idle";
 	const loadingStartTime = useRef(null);
 	const onDoneRef = useRef(onDone);
 	const ButtonComponent = asChild ? Slot : Button$1;
@@ -18,24 +24,23 @@ function SaveButton({ asChild = false, children, loading, done, onDone, ...props
 	}, [onDone]);
 	useEffect(() => {
 		if (loading) {
-			setState("loading");
 			loadingStartTime.current = Date.now();
-		} else if (done) {
-			const currentTime = Date.now();
-			const loadingDuration = loadingStartTime.current ? currentTime - loadingStartTime.current : 0;
-			const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
-			let doneTimer = null;
-			const savedTimer = window.setTimeout(() => {
-				setState("done");
-				doneTimer = window.setTimeout(() => {
-					onDoneRef.current?.();
-				}, DONE_TIMEOUT_MS);
-			}, remainingDelay);
-			return () => {
-				window.clearTimeout(savedTimer);
-				if (doneTimer !== null) window.clearTimeout(doneTimer);
-			};
-		} else if (!loading && !done) setState("idle");
+			return;
+		}
+		if (!done) return;
+		const loadingDuration = loadingStartTime.current ? Date.now() - loadingStartTime.current : 0;
+		const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
+		let doneTimer = null;
+		const minElapsedTimer = window.setTimeout(() => {
+			setMinElapsed(true);
+			doneTimer = window.setTimeout(() => {
+				onDoneRef.current?.();
+			}, DONE_TIMEOUT_MS);
+		}, remainingDelay);
+		return () => {
+			window.clearTimeout(minElapsedTimer);
+			if (doneTimer !== null) window.clearTimeout(doneTimer);
+		};
 	}, [loading, done]);
 	return /* @__PURE__ */ jsxs(ButtonComponent, {
 		...props,

package/dist/esm/lib/save-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"save-button.js","names":["Button"],"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import { CheckIcon } from \"@radix-ui/react-icons\";\nimport { Flex, Slot, Slottable, Spinner, Text } from \"@radix-ui/themes\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"./elements.js\";\nimport type { ButtonProps } from \"./elements.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { namespaceClassNames } from \"./widget-dom-props.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  const [state, setState] = useState<\"idle\" | \"loading\" | \"done\">(\n    loading ? \"loading\" : done ? \"done\" : \"idle\",\n  );\n  const loadingStartTime = useRef<number | null>(null);\n  const onDoneRef = useRef(onDone);\n  const ButtonComponent = asChild ? Slot : Button;\n\n  useEffect(() => {\n    onDoneRef.current = onDone;\n  }, [onDone]);\n\n  useEffect(() => {\n    if (loading) {\n      // FIXME: This should be refactored\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setState(\"loading\");\n      loadingStartTime.current = Date.now();\n    } else if (done) {\n      const currentTime = Date.now();\n      const loadingDuration = loadingStartTime.current\n        ? currentTime - loadingStartTime.current\n        : 0;\n\n      // If loading lasted less than 500 ms, wait for the remaining time\n      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n      let doneTimer: number | null = null;\n      const savedTimer = window.setTimeout(() => {\n        setState(\"done\");\n\n        doneTimer = window.setTimeout(() => {\n          onDoneRef.current?.();\n        }, DONE_TIMEOUT_MS);\n      }, remainingDelay);\n\n      return () => {\n        window.clearTimeout(savedTimer);\n        if (doneTimer !== null) {\n          window.clearTimeout(doneTimer);\n        }\n      };\n    } else if (!loading && !done) {\n      setState(\"idle\");\n    }\n  }, [loading, done]);\n\n  return (\n    <ButtonComponent\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            <Translation\n              defaultMessage=\"Done\"\n              id=\"wjt0K3\"\n              description=\"Button label indicating an action has completed successfully\"\n            />\n          </Text>\n        </Flex>\n      )}\n    </ButtonComponent>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAU1B,SAAgB,WAAW,EACzB,UAAU,OACV,UACA,SACA,MACA,QACA,GAAG,SACe;CAClB,MAAM,CAAC,OAAO,YAAY,SACxB,UAAU,YAAY,OAAO,SAAS,MACxC;CACA,MAAM,mBAAmB,OAAsB,IAAI;CACnD,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,kBAAkB,UAAU,OAAOA;CAEzC,gBAAgB;EACd,UAAU,UAAU;CACtB,GAAG,CAAC,MAAM,CAAC;CAEX,gBAAgB;EACd,IAAI,SAAS;GAGX,SAAS,SAAS;GAClB,iBAAiB,UAAU,KAAK,IAAI;EACtC,OAAO,IAAI,MAAM;GACf,MAAM,cAAc,KAAK,IAAI;GAC7B,MAAM,kBAAkB,iBAAiB,UACrC,cAAc,iBAAiB,UAC/B;GAGJ,MAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;GAEtE,IAAI,YAA2B;GAC/B,MAAM,aAAa,OAAO,iBAAiB;IACzC,SAAS,MAAM;IAEf,YAAY,OAAO,iBAAiB;KAClC,UAAU,UAAU;IACtB,GAAG,eAAe;GACpB,GAAG,cAAc;GAEjB,aAAa;IACX,OAAO,aAAa,UAAU;IAC9B,IAAI,cAAc,MAChB,OAAO,aAAa,SAAS;GAEjC;EACF,OAAO,IAAI,CAAC,WAAW,CAAC,MACtB,SAAS,MAAM;CAEnB,GAAG,CAAC,SAAS,IAAI,CAAC;CAElB,OACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,oBAAoB,aAAa;EAC5C,mBAAiB;EAHnB,UAAA;GAKE,oBAAC,WAAD,EAAY,SAAoB,CAAA;GAC/B,UAAU,aACT,oBAAC,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IAEN,UAAA,oBAAC,SAAD,EAAS,MAAK,IAAK,CAAA;GACf,CAAA;GAGP,UAAU,UACT,qBAAC,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IACN,KAAI;IANN,UAAA,CAQE,oBAAC,WAAD;KACE,OAAM;KACN,QAAO;KACP,OAAO,EAAE,YAAY,OAAO;KAC5B,WAAW,oBAAoB,wBAAwB;IACxD,CAAA,GACD,oBAAC,MAAD;KAAM,WAAW,oBAAoB,wBAAwB;KAC3D,UAAA,oBAAC,aAAD;MACE,gBAAe;MACf,IAAG;MACH,aAAY;KACb,CAAA;IACG,CAAA,CACF;;EAEO;;AAErB"}
+{"version":3,"file":"save-button.js","names":["Button"],"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import { CheckIcon } from \"@radix-ui/react-icons\";\nimport { Flex, Slot, Slottable, Spinner, Text } from \"@radix-ui/themes\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"./elements.js\";\nimport type { ButtonProps } from \"./elements.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { namespaceClassNames } from \"./widget-dom-props.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  // Whether the spinner has been visible for at least SAVING_TIMEOUT_MS, so a\n  // fast response doesn't flash it for a single frame.\n  const [minElapsed, setMinElapsed] = useState(!!done);\n  const [prevLoading, setPrevLoading] = useState(loading);\n  if (loading !== prevLoading) {\n    setPrevLoading(loading);\n    if (loading) {\n      setMinElapsed(false);\n    }\n  }\n\n  const state = loading\n    ? \"loading\"\n    : done\n      ? minElapsed\n        ? \"done\"\n        : \"loading\"\n      : \"idle\";\n\n  const loadingStartTime = useRef<number | null>(null);\n  const onDoneRef = useRef(onDone);\n  const ButtonComponent = asChild ? Slot : Button;\n\n  useEffect(() => {\n    onDoneRef.current = onDone;\n  }, [onDone]);\n\n  useEffect(() => {\n    if (loading) {\n      loadingStartTime.current = Date.now();\n      return;\n    }\n    if (!done) {\n      return;\n    }\n\n    const loadingDuration = loadingStartTime.current\n      ? Date.now() - loadingStartTime.current\n      : 0;\n    const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n    let doneTimer: number | null = null;\n    const minElapsedTimer = window.setTimeout(() => {\n      setMinElapsed(true);\n\n      doneTimer = window.setTimeout(() => {\n        onDoneRef.current?.();\n      }, DONE_TIMEOUT_MS);\n    }, remainingDelay);\n\n    return () => {\n      window.clearTimeout(minElapsedTimer);\n      if (doneTimer !== null) {\n        window.clearTimeout(doneTimer);\n      }\n    };\n  }, [loading, done]);\n\n  return (\n    <ButtonComponent\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            <Translation\n              defaultMessage=\"Done\"\n              id=\"wjt0K3\"\n              description=\"Button label indicating an action has completed successfully\"\n            />\n          </Text>\n        </Flex>\n      )}\n    </ButtonComponent>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAU1B,SAAgB,WAAW,EACzB,UAAU,OACV,UACA,SACA,MACA,QACA,GAAG,SACe;CAGlB,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC,CAAC,IAAI;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO;CACtD,IAAI,YAAY,aAAa;EAC3B,eAAe,OAAO;EACtB,IAAI,SACF,cAAc,KAAK;CAEvB;CAEA,MAAM,QAAQ,UACV,YACA,OACE,aACE,SACA,YACF;CAEN,MAAM,mBAAmB,OAAsB,IAAI;CACnD,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,kBAAkB,UAAU,OAAOA;CAEzC,gBAAgB;EACd,UAAU,UAAU;CACtB,GAAG,CAAC,MAAM,CAAC;CAEX,gBAAgB;EACd,IAAI,SAAS;GACX,iBAAiB,UAAU,KAAK,IAAI;GACpC;EACF;EACA,IAAI,CAAC,MACH;EAGF,MAAM,kBAAkB,iBAAiB,UACrC,KAAK,IAAI,IAAI,iBAAiB,UAC9B;EACJ,MAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;EAEtE,IAAI,YAA2B;EAC/B,MAAM,kBAAkB,OAAO,iBAAiB;GAC9C,cAAc,IAAI;GAElB,YAAY,OAAO,iBAAiB;IAClC,UAAU,UAAU;GACtB,GAAG,eAAe;EACpB,GAAG,cAAc;EAEjB,aAAa;GACX,OAAO,aAAa,eAAe;GACnC,IAAI,cAAc,MAChB,OAAO,aAAa,SAAS;EAEjC;CACF,GAAG,CAAC,SAAS,IAAI,CAAC;CAElB,OACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,oBAAoB,aAAa;EAC5C,mBAAiB;EAHnB,UAAA;GAKE,oBAAC,WAAD,EAAY,SAAoB,CAAA;GAC/B,UAAU,aACT,oBAAC,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IAEN,UAAA,oBAAC,SAAD,EAAS,MAAK,IAAK,CAAA;GACf,CAAA;GAGP,UAAU,UACT,qBAAC,MAAD;IACE,IAAG;IACH,OAAM;IACN,SAAQ;IACR,UAAS;IACT,OAAM;IACN,KAAI;IANN,UAAA,CAQE,oBAAC,WAAD;KACE,OAAM;KACN,QAAO;KACP,OAAO,EAAE,YAAY,OAAO;KAC5B,WAAW,oBAAoB,wBAAwB;IACxD,CAAA,GACD,oBAAC,MAAD;KAAM,WAAW,oBAAoB,wBAAwB;KAC3D,UAAA,oBAAC,aAAD;MACE,gBAAe;MACf,IAAG;MACH,aAAY;KACb,CAAA;IACG,CAAA,CACF;;EAEO;;AAErB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workos-inc/widgets",
-  "version": "1.20.2-next.1792439904014",
+  "version": "1.20.2-next.1792451814155",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/lib/compose-refs.ts

@@ -53,7 +53,7 @@ function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
  * Accepts callback refs and RefObject(s)
  */
 function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
   return React.useCallback(composeRefs(...refs), refs);
 }
 

package/src/lib/elevated-access.tsx

@@ -1,6 +1,6 @@
 import { Callout, Flex, Text } from "@radix-ui/themes";
 import type { PropsWithChildren } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useElevatedAccessToken } from "../api/api-provider.js";
 import { useClientGraphqlMutation } from "../api/client-graphql/hooks.js";
 import { useMe } from "./api/me.js";
@@ -24,12 +24,19 @@ export function ElevatedAccess({
   const [authenticationChallengeId, setAuthenticationChallengeId] =
     useState<string>();
 
-  const prevAccessToken = useRef(elevatedAccess);
-  const hasCalledOnVerified = useRef(false);
+  const [{ prevAccessToken, hasTokenExpired }, setPrevAccessState] = useState({
+    prevAccessToken: elevatedAccess,
+    hasTokenExpired: false,
+  });
+  if (elevatedAccess !== prevAccessToken) {
+    setPrevAccessState({
+      prevAccessToken: elevatedAccess,
+      hasTokenExpired:
+        hasTokenExpired || (!!prevAccessToken && !elevatedAccess),
+    });
+  }
 
-  useEffect(() => {
-    prevAccessToken.current = elevatedAccess;
-  }, [elevatedAccess]);
+  const hasCalledOnVerified = useRef(false);
 
   const handleVerificationSuccess = useCallback(
     (elevatedAccessToken: string) => {
@@ -51,10 +58,6 @@ export function ElevatedAccess({
   }
 
   if (!authenticationChallengeId) {
-    // FIXME: This should be refactored
-    // eslint-disable-next-line react-hooks/refs
-    const hasTokenExpired = !!prevAccessToken.current;
-
     return (
       <SendVerificationEmailForm
         type={type}

package/src/lib/otp-input.tsx

@@ -10,12 +10,15 @@ interface OptContextType {
   readOnly?: boolean;
   state?: "valid" | "invalid";
   onEnterPressed: () => void;
-  onChildAdd: (input: HTMLInputElement) => void;
   onCharChange: (char: string, index: number) => void;
-  allChildrenAdded: boolean;
+  onChildAdd: (element: HTMLInputElement | null, index: number) => void;
 }
 
 const OtpContext = React.createContext<OptContextType | undefined>(undefined);
+OtpContext.displayName = "OtpContext";
+
+const OtpIndexContext = React.createContext<number>(-1);
+OtpIndexContext.displayName = "OtpIndexContext";
 
 type OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
   id?: string;
@@ -43,8 +46,6 @@ export const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(
     forwardedRef,
   ) {
     const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);
-    const [allChildrenAdded, setAllChildrenAdded] =
-      React.useState<boolean>(false);
     const childCount = React.Children.count(children);
 
     // Internal array state is the source of truth so that empty slots between
@@ -75,7 +76,7 @@ export const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(
     );
 
     const hiddenInputRef = React.useRef<HTMLInputElement>(null);
-    const childrenRefs = React.useRef<HTMLInputElement[]>([]);
+    const childrenRefs = React.useRef<(HTMLInputElement | null)[]>([]);
 
     const attemptAutoSubmit = React.useCallback(
       (enterPressed = false) => {
@@ -97,19 +98,10 @@ export const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(
     );
 
     const handleChildAdd = React.useCallback(
-      (input: HTMLInputElement) => {
-        if (input) {
-          input.dataset.index = `${childrenRefs.current.length}`;
-          childrenRefs.current.push(input);
-        } else {
-          childrenRefs.current.pop();
-        }
-
-        if (childrenRefs.current.length === childCount) {
-          setAllChildrenAdded(true);
-        }
+      (element: HTMLInputElement | null, index: number) => {
+        childrenRefs.current[index] = element;
       },
-      [childCount],
+      [],
     );
 
     const handleCharChange = React.useCallback(
@@ -124,24 +116,23 @@ export const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(
       [setValue],
     );
 
-    const otpContext = React.useMemo(
-      () => ({
-        value,
-        readOnly,
-        state,
-        allChildrenAdded,
-        onEnterPressed: handleEnterPressed,
-        onChildAdd: handleChildAdd,
-        onCharChange: handleCharChange,
-      }),
+    const otpContext = React.useMemo<OptContextType>(
+      () =>
+        ({
+          value,
+          readOnly,
+          state,
+          onEnterPressed: handleEnterPressed,
+          onCharChange: handleCharChange,
+          onChildAdd: handleChildAdd,
+        }) satisfies OptContextType,
       [
         value,
-        allChildrenAdded,
         readOnly,
         state,
         handleEnterPressed,
-        handleChildAdd,
         handleCharChange,
+        handleChildAdd,
       ],
     );
 
@@ -170,7 +161,11 @@ export const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(
             childrenRefs.current?.[index]?.focus();
           }}
         >
-          {children}
+          {React.Children.map(children, (child, index) => (
+            <OtpIndexContext.Provider value={index}>
+              {child}
+            </OtpIndexContext.Provider>
+          ))}
           <input
             ref={useComposedRefs(forwardedRef, hiddenInputRef)}
             defaultValue={value.join("")}
@@ -194,16 +189,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     forwardedRef,
   ) {
     const otpContext = useOptContext();
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    const composedInputRef = useComposedRefs(
-      forwardedRef,
-      inputRef,
-      otpContext.onChildAdd,
+    const { onChildAdd } = otpContext;
+    const index = React.useContext(OtpIndexContext);
+    const inputRef = React.useCallback(
+      (input: HTMLInputElement | null) => {
+        onChildAdd(input, index);
+      },
+      [onChildAdd, index],
     );
+    const composedInputRef = useComposedRefs(forwardedRef, inputRef);
 
-    // FIXME: This should be refactored
-    // eslint-disable-next-line react-hooks/refs
-    const index = Number(inputRef.current?.dataset.index ?? -1);
     const char = otpContext.value[index] ?? "";
 
     return (
@@ -230,7 +225,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               // Update the value if it matches the input pattern (number only) or is empty (backspace)
               if (event.target.validity.valid || event.target.value === "") {
                 const char = event.target.value;
-                const index = Number(event.target.dataset.index ?? -1);
                 otpContext.onCharChange(char, index);
                 focusSibling(event.currentTarget, { back: char === "" });
               }
@@ -258,7 +252,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
 const useOptContext = () => {
   const optContext = React.useContext(OtpContext);
-
   if (!optContext) {
     throw new Error(
       "OtpInput compound components cannot be rendered outside the OtpRoot component",

package/src/lib/save-button.tsx

@@ -25,9 +25,25 @@ export function SaveButton({
   onDone,
   ...props
 }: SaveButtonProps) {
-  const [state, setState] = useState<"idle" | "loading" | "done">(
-    loading ? "loading" : done ? "done" : "idle",
-  );
+  // Whether the spinner has been visible for at least SAVING_TIMEOUT_MS, so a
+  // fast response doesn't flash it for a single frame.
+  const [minElapsed, setMinElapsed] = useState(!!done);
+  const [prevLoading, setPrevLoading] = useState(loading);
+  if (loading !== prevLoading) {
+    setPrevLoading(loading);
+    if (loading) {
+      setMinElapsed(false);
+    }
+  }
+
+  const state = loading
+    ? "loading"
+    : done
+      ? minElapsed
+        ? "done"
+        : "loading"
+      : "idle";
+
   const loadingStartTime = useRef<number | null>(null);
   const onDoneRef = useRef(onDone);
   const ButtonComponent = asChild ? Slot : Button;
@@ -38,37 +54,33 @@ export function SaveButton({
 
   useEffect(() => {
     if (loading) {
-      // FIXME: This should be refactored
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setState("loading");
       loadingStartTime.current = Date.now();
-    } else if (done) {
-      const currentTime = Date.now();
-      const loadingDuration = loadingStartTime.current
-        ? currentTime - loadingStartTime.current
-        : 0;
+      return;
+    }
+    if (!done) {
+      return;
+    }
 
-      // If loading lasted less than 500 ms, wait for the remaining time
-      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
+    const loadingDuration = loadingStartTime.current
+      ? Date.now() - loadingStartTime.current
+      : 0;
+    const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
 
-      let doneTimer: number | null = null;
-      const savedTimer = window.setTimeout(() => {
-        setState("done");
+    let doneTimer: number | null = null;
+    const minElapsedTimer = window.setTimeout(() => {
+      setMinElapsed(true);
 
-        doneTimer = window.setTimeout(() => {
-          onDoneRef.current?.();
-        }, DONE_TIMEOUT_MS);
-      }, remainingDelay);
+      doneTimer = window.setTimeout(() => {
+        onDoneRef.current?.();
+      }, DONE_TIMEOUT_MS);
+    }, remainingDelay);
 
-      return () => {
-        window.clearTimeout(savedTimer);
-        if (doneTimer !== null) {
-          window.clearTimeout(doneTimer);
-        }
-      };
-    } else if (!loading && !done) {
-      setState("idle");
-    }
+    return () => {
+      window.clearTimeout(minElapsedTimer);
+      if (doneTimer !== null) {
+        window.clearTimeout(doneTimer);
+      }
+    };
   }, [loading, done]);
 
   return (