From 2d56b78878380cb6f8d09a524b8023e56a3cb83a Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Mon, 14 Oct 2024 15:16:02 +0200 Subject: [PATCH] fix!: improve component naming (#218) --- .prettierignore | 2 +- package-lock.json | 13 +- .../.storybook/preview.tsx | 8 +- .../components/login/1fa/all.stories.ts | 2 +- .../components/login/1fa/code.stories.ts | 2 +- .../components/login/1fa/custom.stories.tsx | 18 +- .../components/login/1fa/passkey.stories.ts | 2 +- .../components/login/1fa/password.stories.ts | 2 +- .../one-step/all-methods.stories.ts | 2 +- .../registration/one-step/password.stories.ts | 2 +- .../registration/one-step/webauthn.stories.ts | 2 +- .../two-step/all-methods.stories.ts | 2 +- .../registration/two-step/password.stories.ts | 2 +- .../src/elements-react/pages/login.tsx | 37 - .../src/elements-react/pages/registration.tsx | 38 - packages/elements-react/.gitignore | 3 +- .../api-report/elements-react-theme.api.json | 95 +- .../api-report/elements-react-theme.api.md | 26 +- .../api-report/elements-react.api.json | 3140 ++++++----------- .../api-report/elements-react.api.md | 378 +- packages/elements-react/package.json | 2 + .../src/components/card/card-two-step.tsx | 17 +- .../src/components/card/card.tsx | 35 + .../src/components/card/content.tsx | 56 + .../src/components/card/footer.tsx | 11 + .../src/components/card/header.tsx | 4 +- .../src/components/card/index.tsx | 102 +- .../src/components/form/form-helpers.ts | 6 +- .../src/components/form/form.tsx | 200 +- .../src/components/form/groups.tsx | 12 +- .../src/components/form/messages.tsx | 25 +- .../src/components/form/nodes/input.tsx | 40 +- .../src/components/form/nodes/node.tsx | 8 +- .../src/components/form/social.tsx | 25 +- .../src/components/generic/divider.tsx | 18 +- .../elements-react/src/context/component.tsx | 2 +- .../src/context/flow-context.tsx | 19 +- packages/elements-react/src/context/index.tsx | 14 +- .../src/context/intl-context.tsx | 16 +- .../elements-react/src/context/provider.tsx | 20 +- .../src/tests/jest/test-utils.tsx | 12 +- .../default/components/card/auth-methods.tsx | 6 +- .../card/current-identifier-button.tsx | 4 +- .../theme/default/components/card/header.tsx | 4 +- .../default/components/default-components.tsx | 58 +- .../theme/default/components/form/button.tsx | 13 +- .../default/components/form/checkbox.tsx | 15 +- .../components/form/group-container.tsx | 6 +- .../theme/default/components/form/image.tsx | 5 +- .../theme/default/components/form/index.tsx | 10 +- .../theme/default/components/form/input.tsx | 9 +- .../theme/default/components/form/label.tsx | 15 +- .../default/components/form/link-button.tsx | 14 +- .../components/form/pin-code-input.tsx | 4 +- .../theme/default/components/form/social.tsx | 14 +- .../theme/default/components/form/text.tsx | 9 +- .../src/theme/default/flows/error.tsx | 7 +- .../src/theme/default/flows/login.tsx | 12 +- .../src/theme/default/flows/recovery.tsx | 12 +- .../src/theme/default/flows/registration.tsx | 12 +- .../src/theme/default/flows/settings.tsx | 12 +- .../src/theme/default/flows/verification.tsx | 16 +- .../__tests__/constructCardHeader.spec.tsx | 2 +- packages/elements-react/src/types.ts | 31 +- .../elements-react/src/util/flowContainer.ts | 66 +- .../util/i18n/__tests__/test-components.tsx | 4 +- .../elements-react/src/util/i18n/index.ts | 7 - packages/elements-react/src/util/index.ts | 9 +- .../elements-react/src/util/onSubmitLogin.ts | 4 +- .../src/util/onSubmitRecovery.ts | 4 +- .../src/util/onSubmitRegistration.ts | 4 +- .../src/util/onSubmitSettings.ts | 4 +- .../src/util/onSubmitVerification.ts | 4 +- .../elements-react/src/util/submitHandler.ts | 7 +- packages/elements-react/src/util/test-id.ts | 18 +- 75 files changed, 1881 insertions(+), 2960 deletions(-) delete mode 100644 packages/elements-react-stories/src/elements-react/pages/login.tsx delete mode 100644 packages/elements-react-stories/src/elements-react/pages/registration.tsx create mode 100644 packages/elements-react/src/components/card/card.tsx create mode 100644 packages/elements-react/src/components/card/content.tsx create mode 100644 packages/elements-react/src/components/card/footer.tsx diff --git a/.prettierignore b/.prettierignore index 4d2302555..6cc00383d 100644 --- a/.prettierignore +++ b/.prettierignore @@ -13,4 +13,4 @@ docs # Generated files CHANGELOG.md -**/api-report/* \ No newline at end of file +**/api-report/* diff --git a/package-lock.json b/package-lock.json index 46a71870f..b473555d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13099,6 +13099,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/lodash.merge": { + "version": "4.6.9", + "resolved": "https://registry.npmjs.org/@types/lodash.merge/-/lodash.merge-4.6.9.tgz", + "integrity": "sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/mdx": { "version": "2.0.13", "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", @@ -25822,7 +25832,6 @@ "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true, "license": "MIT" }, "node_modules/lodash.sortby": { @@ -34193,6 +34202,7 @@ "@ory/client-fetch": "^1.15.4", "clsx": "2.1.1", "input-otp": "1.2.4", + "lodash.merge": "4.6.2", "react-hook-form": "7.53.0", "react-intl": "6.7.0", "tailwind-merge": "2.5.2" @@ -34200,6 +34210,7 @@ "devDependencies": { "@hookform/devtools": "^4.3.1", "@svgr/plugin-svgo": "^8.1.0", + "@types/lodash.merge": "4.6.9", "esbuild-plugin-svgr": "^2.1.0", "eslint-plugin-react": "7.37.0", "postcss": "8.4.47", diff --git a/packages/elements-react-stories/.storybook/preview.tsx b/packages/elements-react-stories/.storybook/preview.tsx index 6e7aaaba3..d6d20294a 100644 --- a/packages/elements-react-stories/.storybook/preview.tsx +++ b/packages/elements-react-stories/.storybook/preview.tsx @@ -1,7 +1,6 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { IntlProvider } from "@ory/elements-react" import type { Decorator, Preview } from "@storybook/react" import { chromaticModes } from "./modes" import "@ory/elements-react/theme/styles.css" @@ -31,11 +30,8 @@ const preview: Preview = { const withI18next: Decorator = (Story, context) => { const { locale } = context.globals - return ( - - - - ) + // TODO: this needs a refactor, because it doesn't pass the locale to the Ory Provider at the moment. + return } // export decorators for storybook to wrap your stories in diff --git a/packages/elements-react-stories/src/elements-react/components/login/1fa/all.stories.ts b/packages/elements-react-stories/src/elements-react/components/login/1fa/all.stories.ts index b5d41da30..3197882dc 100644 --- a/packages/elements-react-stories/src/elements-react/components/login/1fa/all.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/login/1fa/all.stories.ts @@ -3,7 +3,7 @@ import { LoginFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" -import { Login } from "../../../pages/login" +import { Login } from "@ory/elements-react/theme" import { config } from "../../../utils" const meta = { diff --git a/packages/elements-react-stories/src/elements-react/components/login/1fa/code.stories.ts b/packages/elements-react-stories/src/elements-react/components/login/1fa/code.stories.ts index 4a95de5cd..93b9bd77b 100644 --- a/packages/elements-react-stories/src/elements-react/components/login/1fa/code.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/login/1fa/code.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Login } from "../../../pages/login" +import { Login } from "@ory/elements-react/theme" import { config } from "../../../utils" import { LoginFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/components/login/1fa/custom.stories.tsx b/packages/elements-react-stories/src/elements-react/components/login/1fa/custom.stories.tsx index 7e077886b..98d171b67 100644 --- a/packages/elements-react-stories/src/elements-react/components/login/1fa/custom.stories.tsx +++ b/packages/elements-react-stories/src/elements-react/components/login/1fa/custom.stories.tsx @@ -1,21 +1,21 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 +import { LoginFlowFromJSON } from "@ory/client-fetch" import { - HeadlessSocialButtonProps, OryCard, OryCardContent, OryForm, OryFormGroups, - OryFormSocialButtons, + OryFormOidcButtons, + OryNodeOidcButtonProps, } from "@ory/elements-react" -import { FlowContextProps, Login } from "../../../pages/login" +import { Login, LoginFlowContextProps } from "@ory/elements-react/theme" import { config } from "../../../utils" -import { LoginFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" -const CustomSocialButton = ({ node }: HeadlessSocialButtonProps) => ( +const CustomSocialButton = ({ node }: OryNodeOidcButtonProps) => (
(
) -const CustomComponents = ({ flow, config }: FlowContextProps) => { +const CustomComponents = ({ flow, config }: LoginFlowContextProps) => { return ( - +
Even though the code method is available, we do not show it here with our customization: diff --git a/packages/elements-react-stories/src/elements-react/components/login/1fa/passkey.stories.ts b/packages/elements-react-stories/src/elements-react/components/login/1fa/passkey.stories.ts index 7360cfbcc..b5c85958c 100644 --- a/packages/elements-react-stories/src/elements-react/components/login/1fa/passkey.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/login/1fa/passkey.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Login } from "../../../pages/login" +import { Login } from "@ory/elements-react/theme" import { config } from "../../../utils" import { LoginFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/components/login/1fa/password.stories.ts b/packages/elements-react-stories/src/elements-react/components/login/1fa/password.stories.ts index 5152ad7b0..8ce8957fc 100644 --- a/packages/elements-react-stories/src/elements-react/components/login/1fa/password.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/login/1fa/password.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Login } from "../../../pages/login" +import { Login } from "@ory/elements-react/theme" import { config } from "../../../utils" import { LoginFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/components/registration/one-step/all-methods.stories.ts b/packages/elements-react-stories/src/elements-react/components/registration/one-step/all-methods.stories.ts index 0c811680b..5edb629d6 100644 --- a/packages/elements-react-stories/src/elements-react/components/registration/one-step/all-methods.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/registration/one-step/all-methods.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Registration } from "../../../pages/registration" +import { Registration } from "@ory/elements-react/theme" import { config } from "../../../utils" import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/components/registration/one-step/password.stories.ts b/packages/elements-react-stories/src/elements-react/components/registration/one-step/password.stories.ts index e98aed4a5..1521783b9 100644 --- a/packages/elements-react-stories/src/elements-react/components/registration/one-step/password.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/registration/one-step/password.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Registration } from "../../../pages/registration" +import { Registration } from "@ory/elements-react/theme" import { config } from "../../../utils" import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/components/registration/one-step/webauthn.stories.ts b/packages/elements-react-stories/src/elements-react/components/registration/one-step/webauthn.stories.ts index 0015fcabb..82416bf45 100644 --- a/packages/elements-react-stories/src/elements-react/components/registration/one-step/webauthn.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/registration/one-step/webauthn.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Registration } from "../../../pages/registration" +import { Registration } from "@ory/elements-react/theme" import { config } from "../../../utils" import { RegistrationFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/components/registration/two-step/all-methods.stories.ts b/packages/elements-react-stories/src/elements-react/components/registration/two-step/all-methods.stories.ts index f6f959ffa..d7cba7350 100644 --- a/packages/elements-react-stories/src/elements-react/components/registration/two-step/all-methods.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/registration/two-step/all-methods.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Registration } from "../../../pages/registration" +import { Registration } from "@ory/elements-react/theme" import { config } from "../../../utils" import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/components/registration/two-step/password.stories.ts b/packages/elements-react-stories/src/elements-react/components/registration/two-step/password.stories.ts index fad32f600..ce50fac68 100644 --- a/packages/elements-react-stories/src/elements-react/components/registration/two-step/password.stories.ts +++ b/packages/elements-react-stories/src/elements-react/components/registration/two-step/password.stories.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { Registration } from "../../../pages/registration" +import { Registration } from "@ory/elements-react/theme" import { config } from "../../../utils" import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch" import type { Meta, StoryObj } from "@storybook/react" diff --git a/packages/elements-react-stories/src/elements-react/pages/login.tsx b/packages/elements-react-stories/src/elements-react/pages/login.tsx deleted file mode 100644 index 6a3f4461a..000000000 --- a/packages/elements-react-stories/src/elements-react/pages/login.tsx +++ /dev/null @@ -1,37 +0,0 @@ -// Copyright © 2024 Ory Corp -// SPDX-License-Identifier: Apache-2.0 - -"use client" -import { FlowType, LoginFlow } from "@ory/client-fetch" -import { - OryCard, - OryClientConfiguration, - OryFlowComponents, - OryProvider, -} from "@ory/elements-react" -import { OryDefaultComponents } from "@ory/elements-react/theme" -import { PropsWithChildren } from "react" - -export type FlowContextProps = { - flow: LoginFlow - components?: Partial - config: OryClientConfiguration -} - -export function Login({ - flow, - config, - children, - components, -}: PropsWithChildren) { - return ( - - {children || } - - ) -} diff --git a/packages/elements-react-stories/src/elements-react/pages/registration.tsx b/packages/elements-react-stories/src/elements-react/pages/registration.tsx deleted file mode 100644 index 4fae6012b..000000000 --- a/packages/elements-react-stories/src/elements-react/pages/registration.tsx +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright © 2024 Ory Corp -// SPDX-License-Identifier: Apache-2.0 - -"use client" - -import { Configuration, FlowType, RegistrationFlow } from "@ory/client-fetch" -import { - OryCard, - OryClientConfiguration, - OryFlowComponents, - OryProvider, -} from "@ory/elements-react" -import { OryDefaultComponents } from "@ory/elements-react/theme" -import { PropsWithChildren } from "react" - -export type FlowContextProps = { - flow: RegistrationFlow - components?: Partial - config: OryClientConfiguration -} - -export function Registration({ - flow, - config, - children, - components, -}: PropsWithChildren) { - return ( - - {children || } - - ) -} diff --git a/packages/elements-react/.gitignore b/packages/elements-react/.gitignore index 09370e39a..c07f23812 100644 --- a/packages/elements-react/.gitignore +++ b/packages/elements-react/.gitignore @@ -1,5 +1,4 @@ playwright/.cache/ playwright-report/* .last-run.json - -api-report/temp \ No newline at end of file +api-report/temp diff --git a/packages/elements-react/api-report/elements-react-theme.api.json b/packages/elements-react/api-report/elements-react-theme.api.json index af39ddd85..ed4c47f02 100644 --- a/packages/elements-react/api-report/elements-react-theme.api.json +++ b/packages/elements-react/api-report/elements-react-theme.api.json @@ -184,7 +184,7 @@ { "kind": "Reference", "text": "OryCardProps", - "canonicalReference": "@ory/elements-react!~OryCardProps:type" + "canonicalReference": "@ory/elements-react!~OryCardRootProps:type" }, { "kind": "Content", @@ -377,8 +377,8 @@ }, { "kind": "Reference", - "text": "HeadlessFormProps", - "canonicalReference": "@ory/elements-react!~HeadlessFormProps:type" + "text": "OryFormRootProps", + "canonicalReference": "@ory/elements-react!~OryFormRootProps:type" }, { "kind": "Content", @@ -428,8 +428,8 @@ }, { "kind": "Reference", - "text": "HeadlessMessageProps", - "canonicalReference": "@ory/elements-react!~HeadlessMessageProps:type" + "text": "OryMessageContentProps", + "canonicalReference": "@ory/elements-react!~OryMessageContentProps:type" }, { "kind": "Content", @@ -599,21 +599,12 @@ }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" + "text": "OryFlowComponentOverrides", + "canonicalReference": "@ory/elements-react!~OryFlowComponentOverrides:type" }, { "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "OryFlowComponents", - "canonicalReference": "@ory/elements-react!~OryFlowComponents:type" - }, - { - "kind": "Content", - "text": ">;\n config: " + "text": ";\n config: " }, { "kind": "Reference", @@ -634,7 +625,7 @@ "name": "ErrorFlowContextProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 8 } }, { @@ -730,21 +721,12 @@ }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" + "text": "OryFlowComponentOverrides", + "canonicalReference": "@ory/elements-react!~OryFlowComponentOverrides:type" }, { "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "OryFlowComponents", - "canonicalReference": "@ory/elements-react!~OryFlowComponents:type" - }, - { - "kind": "Content", - "text": ">;\n config: " + "text": ";\n config: " }, { "kind": "Reference", @@ -765,7 +747,7 @@ "name": "LoginFlowContextProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 8 } }, { @@ -885,21 +867,12 @@ }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" + "text": "OryFlowComponentOverrides", + "canonicalReference": "@ory/elements-react!~OryFlowComponentOverrides:type" }, { "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "OryFlowComponents", - "canonicalReference": "@ory/elements-react!~OryFlowComponents:type" - }, - { - "kind": "Content", - "text": ">;\n config: " + "text": ";\n config: " }, { "kind": "Reference", @@ -920,7 +893,7 @@ "name": "RecoveryFlowContextProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 8 } }, { @@ -1085,21 +1058,12 @@ }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "OryFlowComponents", - "canonicalReference": "@ory/elements-react!~OryFlowComponents:type" + "text": "OryFlowComponentOverrides", + "canonicalReference": "@ory/elements-react!~OryFlowComponentOverrides:type" }, { "kind": "Content", - "text": ">;\n config: " + "text": ";\n config: " }, { "kind": "Reference", @@ -1120,7 +1084,7 @@ "name": "SettingsFlowContextProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 8 } }, { @@ -1216,21 +1180,12 @@ }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "OryFlowComponents", - "canonicalReference": "@ory/elements-react!~OryFlowComponents:type" + "text": "OryFlowComponentOverrides", + "canonicalReference": "@ory/elements-react!~OryFlowComponentOverrides:type" }, { "kind": "Content", - "text": ">;\n config: " + "text": ";\n config: " }, { "kind": "Reference", @@ -1251,7 +1206,7 @@ "name": "VerificationFlowContextProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 8 } } ] diff --git a/packages/elements-react/api-report/elements-react-theme.api.md b/packages/elements-react/api-report/elements-react-theme.api.md index 2a4341bd3..8c4d60693 100644 --- a/packages/elements-react/api-report/elements-react-theme.api.md +++ b/packages/elements-react/api-report/elements-react-theme.api.md @@ -27,10 +27,10 @@ import { UiNodeTextAttributes } from '@ory/client-fetch'; import { UiText } from '@ory/client-fetch'; import { VerificationFlow } from '@ory/client-fetch'; -// Warning: (ae-forgotten-export) The symbol "OryCardProps" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function DefaultCard({ children }: OryCardProps): react_jsx_runtime.JSX.Element; +export function DefaultCard({ children }: OryCardRootProps): react_jsx_runtime.JSX.Element; // Warning: (ae-forgotten-export) The symbol "OryCardContentProps" needs to be exported by the entry point index.d.ts // @@ -46,15 +46,15 @@ export function DefaultCardHeader(): react_jsx_runtime.JSX.Element; // @public (undocumented) export function DefaultCardLogo(): react_jsx_runtime.JSX.Element; -// Warning: (ae-forgotten-export) The symbol "HeadlessFormProps" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "OryFormRootProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren): react_jsx_runtime.JSX.Element; +export function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren): react_jsx_runtime.JSX.Element; -// Warning: (ae-forgotten-export) The symbol "HeadlessMessageProps" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "OryMessageContentProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function DefaultMessage({ message }: HeadlessMessageProps): react_jsx_runtime.JSX.Element; +export function DefaultMessage({ message }: OryMessageContentProps): react_jsx_runtime.JSX.Element; // @public (undocumented) export function DefaultMessageContainer({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element | null; @@ -66,7 +66,7 @@ export { Error_2 as Error } // @public (undocumented) export type ErrorFlowContextProps = { error: FlowError; - components?: Partial; + components?: OryFlowComponentOverrides; config: OryClientConfiguration; }; @@ -76,10 +76,12 @@ export function Login({ flow, config, children, components: flowOverrideComponen // @public (undocumented) export type LoginFlowContextProps = { flow: LoginFlow; - components?: Partial; + components?: OryFlowComponentOverrides; config: OryClientConfiguration; }; +// Warning: (ae-forgotten-export) The symbol "OryFlowComponents" needs to be exported by the entry point index.d.ts +// // @public (undocumented) export const OryDefaultComponents: OryFlowComponents; @@ -89,7 +91,7 @@ export function Recovery({ flow, config, children, components: flowOverrideCompo // @public (undocumented) export type RecoveryFlowContextProps = { flow: RecoveryFlow; - components?: Partial; + components?: OryFlowComponentOverrides; config: OryClientConfiguration; }; @@ -104,7 +106,7 @@ export function Settings({ flow, config, children, components: flowOverrideCompo // @public (undocumented) export type SettingsFlowContextProps = { flow: SettingsFlow; - components?: Partial; + components?: OryFlowComponentOverrides; config: OryClientConfiguration; }; @@ -114,13 +116,13 @@ export function Verification({ flow, config, children, components: flowOverrideC // @public (undocumented) export type VerificationFlowContextProps = { flow: VerificationFlow; - components?: Partial; + components?: OryFlowComponentOverrides; config: OryClientConfiguration; }; // Warnings were encountered during analysis: // -// dist/theme/default/index.d.ts:25:5 - (ae-forgotten-export) The symbol "OryFlowComponents" needs to be exported by the entry point index.d.ts +// dist/theme/default/index.d.ts:25:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts // dist/theme/default/index.d.ts:26:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts // (No @packageDocumentation comment for this package) diff --git a/packages/elements-react/api-report/elements-react.api.json b/packages/elements-react/api-report/elements-react.api.json index 86f8d62e9..4cdace429 100644 --- a/packages/elements-react/api-report/elements-react.api.json +++ b/packages/elements-react/api-report/elements-react.api.json @@ -174,43 +174,39 @@ "members": [ { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!CustomLanguageFormats:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!ErrorFlowContainer:type", + "docComment": "/**\n * A flow container for the error flow\n *\n * @see\n *\n * OryFlow\n *\n * @see\n *\n * FlowError (Error flow)\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type CustomLanguageFormats = " - }, - { - "kind": "Content", - "text": "{\n [k in (typeof " + "text": "type ErrorFlowContainer = " }, { "kind": "Reference", - "text": "LanguageCodes", - "canonicalReference": "@ory/elements-react!LanguageCodes:var" + "text": "OryFlow", + "canonicalReference": "@ory/elements-react!~OryFlow:type" }, { "kind": "Content", - "text": ")[number]]?: " + "text": "<" }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" + "text": "FlowType.Error", + "canonicalReference": "@ory/client-fetch!FlowType.Error:member" }, { "kind": "Content", - "text": "<" + "text": ", " }, { "kind": "Reference", - "text": "TranslationFile", - "canonicalReference": "@ory/elements-react!TranslationFile:type" + "text": "FlowError", + "canonicalReference": "@ory/client-fetch!FlowError:interface" }, { "kind": "Content", - "text": ">;\n}" + "text": ">" }, { "kind": "Content", @@ -219,29 +215,25 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "CustomLanguageFormats", + "name": "ErrorFlowContainer", "typeTokenRange": { "startIndex": 1, - "endIndex": 8 + "endIndex": 7 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!CustomTranslations:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!FlowContainerSetter:type", + "docComment": "/**\n * Function to set the flow container.\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type CustomTranslations = " - }, - { - "kind": "Content", - "text": "{\n customTranslations: " + "text": "type FlowContainerSetter = " }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" + "text": "Dispatch", + "canonicalReference": "@types/react!React.Dispatch:type" }, { "kind": "Content", @@ -249,30 +241,21 @@ }, { "kind": "Reference", - "text": "CustomLanguageFormats", - "canonicalReference": "@ory/elements-react!CustomLanguageFormats:type" - }, - { - "kind": "Content", - "text": ">;\n locale: (typeof " - }, - { - "kind": "Reference", - "text": "LanguageCodes", - "canonicalReference": "@ory/elements-react!LanguageCodes:var" + "text": "Partial", + "canonicalReference": "!Partial:type" }, { "kind": "Content", - "text": ")[number];\n defaultLocale: (typeof " + "text": "<" }, { "kind": "Reference", - "text": "LanguageCodes", - "canonicalReference": "@ory/elements-react!LanguageCodes:var" + "text": "OryFlowContainer", + "canonicalReference": "@ory/elements-react!OryFlowContainer:type" }, { "kind": "Content", - "text": ")[number];\n}" + "text": ">>" }, { "kind": "Content", @@ -281,47 +264,38 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "CustomTranslations", + "name": "FlowContainerSetter", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 7 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!ErrorFlowContainer:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!FlowContextValue:type", + "docComment": "/**\n * The return value of the OryFlowContext.\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type ErrorFlowContainer = " - }, - { - "kind": "Reference", - "text": "BaseFlow", - "canonicalReference": "@ory/elements-react!~BaseFlow:type" - }, - { - "kind": "Content", - "text": "<" + "text": "type FlowContextValue = " }, { "kind": "Reference", - "text": "FlowType.Error", - "canonicalReference": "@ory/client-fetch!FlowType.Error:member" + "text": "OryFlowContainer", + "canonicalReference": "@ory/elements-react!OryFlowContainer:type" }, { "kind": "Content", - "text": ", " + "text": " & {\n setFlowContainer: " }, { "kind": "Reference", - "text": "FlowError", - "canonicalReference": "@ory/client-fetch!FlowError:interface" + "text": "FlowContainerSetter", + "canonicalReference": "@ory/elements-react!FlowContainerSetter:type" }, { "kind": "Content", - "text": ">" + "text": ";\n}" }, { "kind": "Content", @@ -330,61 +304,29 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "ErrorFlowContainer", + "name": "FlowContextValue", "typeTokenRange": { "startIndex": 1, - "endIndex": 7 + "endIndex": 5 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!FlowContainer:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!FormValues:type", + "docComment": "/**\n * A generic type for the form values.\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type FlowContainer = " - }, - { - "kind": "Reference", - "text": "LoginFlowContainer", - "canonicalReference": "@ory/elements-react!LoginFlowContainer:type" - }, - { - "kind": "Content", - "text": " | " - }, - { - "kind": "Reference", - "text": "RegistrationFlowContainer", - "canonicalReference": "@ory/elements-react!RegistrationFlowContainer:type" - }, - { - "kind": "Content", - "text": " | " - }, - { - "kind": "Reference", - "text": "RecoveryFlowContainer", - "canonicalReference": "@ory/elements-react!RecoveryFlowContainer:type" - }, - { - "kind": "Content", - "text": " | " + "text": "type FormValues = " }, { "kind": "Reference", - "text": "VerificationFlowContainer", - "canonicalReference": "@ory/elements-react!VerificationFlowContainer:type" + "text": "Record", + "canonicalReference": "!Record:type" }, { "kind": "Content", - "text": " | " - }, - { - "kind": "Reference", - "text": "SettingsFlowContainer", - "canonicalReference": "@ory/elements-react!SettingsFlowContainer:type" + "text": "" }, { "kind": "Content", @@ -393,47 +335,29 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "FlowContainer", + "name": "FormValues", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 3 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!FlowContainerSetter:type", + "canonicalReference": "@ory/elements-react!Locale:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type FlowContainerSetter = " - }, - { - "kind": "Reference", - "text": "Dispatch", - "canonicalReference": "@types/react!React.Dispatch:type" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" + "text": "type Locale = " }, { "kind": "Content", - "text": "<" + "text": "keyof typeof " }, { "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" - }, - { - "kind": "Content", - "text": ">>" + "text": "locales", + "canonicalReference": "@ory/elements-react!OryLocales:namespace" }, { "kind": "Content", @@ -442,38 +366,47 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "FlowContainerSetter", + "name": "Locale", "typeTokenRange": { "startIndex": 1, - "endIndex": 7 + "endIndex": 3 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!FlowContextValue:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!LoginFlowContainer:type", + "docComment": "/**\n * A flow container for the login flow\n *\n * @see\n *\n * OryFlow\n *\n * @see\n *\n * LoginFlow\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type FlowContextValue = " + "text": "type LoginFlowContainer = " }, { "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" + "text": "OryFlow", + "canonicalReference": "@ory/elements-react!~OryFlow:type" }, { "kind": "Content", - "text": " & {\n setFlowContainer: " + "text": "<" }, { "kind": "Reference", - "text": "FlowContainerSetter", - "canonicalReference": "@ory/elements-react!FlowContainerSetter:type" + "text": "FlowType.Login", + "canonicalReference": "@ory/client-fetch!FlowType.Login:member" }, { "kind": "Content", - "text": ";\n}" + "text": ", " + }, + { + "kind": "Reference", + "text": "LoginFlow", + "canonicalReference": "@ory/client-fetch!LoginFlow:interface" + }, + { + "kind": "Content", + "text": ">" }, { "kind": "Content", @@ -482,46 +415,33 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "FlowContextValue", + "name": "LoginFlowContainer", "typeTokenRange": { "startIndex": 1, - "endIndex": 5 + "endIndex": 7 } }, { "kind": "Function", - "canonicalReference": "@ory/elements-react!formatMessage:function(1)", - "docComment": "", + "canonicalReference": "@ory/elements-react!messageTestId:function(1)", + "docComment": "/**\n * Helper function to generate a test id for a UiText message.\n *\n * @param message - the UiText message to generate a test id for\n *\n * @returns a unique, stable test id for the message\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "declare function formatMessage(uiText: " + "text": "declare function messageTestId(message: " }, { "kind": "Reference", "text": "UiText", "canonicalReference": "@ory/client-fetch!UiText:interface" }, - { - "kind": "Content", - "text": " | undefined" - }, - { - "kind": "Content", - "text": ", intl: " - }, - { - "kind": "Reference", - "text": "IntlShape", - "canonicalReference": "react-intl!IntlShape:interface" - }, { "kind": "Content", "text": "): " }, { "kind": "Content", - "text": "string" + "text": "{\n \"data-testid\": string;\n}" }, { "kind": "Content", @@ -530,96 +450,98 @@ ], "fileUrlPath": "dist/index.d.ts", "returnTypeTokenRange": { - "startIndex": 6, - "endIndex": 7 + "startIndex": 3, + "endIndex": 4 }, "releaseTag": "Public", "overloadIndex": 1, "parameters": [ { - "parameterName": "uiText", + "parameterName": "message", "parameterTypeTokenRange": { "startIndex": 1, - "endIndex": 3 - }, - "isOptional": false - }, - { - "parameterName": "intl", - "parameterTypeTokenRange": { - "startIndex": 4, - "endIndex": 5 + "endIndex": 2 }, "isOptional": false } ], - "name": "formatMessage" + "name": "messageTestId" }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!formElementId:function(1)", - "docComment": "", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OnSubmitHandlerProps:type", + "docComment": "/**\n * Props for the submit handler\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "declare function formElementId(attributes: " + "text": "type OnSubmitHandlerProps = " + }, + { + "kind": "Content", + "text": "{\n setFlowContainer: (flowContainer: " + }, + { + "kind": "Reference", + "text": "OryFlowContainer", + "canonicalReference": "@ory/elements-react!OryFlowContainer:type" + }, + { + "kind": "Content", + "text": ") => void;\n body: T;\n onRedirect: " + }, + { + "kind": "Reference", + "text": "OnRedirectHandler", + "canonicalReference": "@ory/client-fetch!OnRedirectHandler:type" + }, + { + "kind": "Content", + "text": ";\n}" }, { "kind": "Content", @@ -627,41 +549,48 @@ } ], "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 4 - }, "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ + "name": "OnSubmitHandlerProps", + "typeParameters": [ { - "parameterName": "attributes", - "parameterTypeTokenRange": { + "typeParameterName": "T", + "constraintTokenRange": { "startIndex": 1, - "endIndex": 2 + "endIndex": 10 }, - "isOptional": false + "defaultTypeTokenRange": { + "startIndex": 0, + "endIndex": 0 + } } ], - "name": "formLabelId" + "typeTokenRange": { + "startIndex": 11, + "endIndex": 16 + } }, { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!FormValues:type", - "docComment": "", + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryCard:function(1)", + "docComment": "/**\n * The root component of the Ory Card.\n *\n * This can be used to build fully custom implementations of the Ory Flows.\n *\n * However, you most likely want to override the individual components instead.\n *\n * @param props - pass children to render instead of the default Ory Card components\n *\n * @returns \n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type FormValues = " + "text": "declare function OryCard({ children }: " }, { "kind": "Reference", - "text": "Record", - "canonicalReference": "!Record:type" + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" }, { "kind": "Content", - "text": "" + "text": "): " + }, + { + "kind": "Reference", + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" }, { "kind": "Content", @@ -669,21 +598,32 @@ } ], "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 4 + }, "releaseTag": "Public", - "name": "FormValues", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 3 - } + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "OryCard" }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessAuthMethodListItemProps:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!OryCardAuthMethodListItemProps:type", + "docComment": "/**\n * Props for the AuthMethodListItem component. This component is used to render a single auth method in the AuthMethodList component.\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessAuthMethodListItemProps = " + "text": "type OryCardAuthMethodListItemProps = " }, { "kind": "Content", @@ -696,60 +636,72 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessAuthMethodListItemProps", + "name": "OryCardAuthMethodListItemProps", "typeTokenRange": { "startIndex": 1, "endIndex": 2 } }, { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessButtonProps:type", - "docComment": "", + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryCardContent:function(1)", + "docComment": "/**\n * A component that renders the content of the Ory Card. This is the main content of the card, such as the flow's form, with it's input fields and messages.\n *\n * You can use this component to build fully custom implementations of the Ory Flows.\n *\n * However, you most likely want to override the individual components instead.\n *\n * @param props - pass children to render instead of the default Ory Card components\n *\n * @returns \n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessButtonProps = " - }, - { - "kind": "Content", - "text": "{\n attributes: " + "text": "declare function OryCardContent({ children }: " }, { "kind": "Reference", - "text": "UiNodeInputAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" + "text": "OryCardContentProps", + "canonicalReference": "@ory/elements-react!OryCardContentProps:type" }, { "kind": "Content", - "text": ";\n node: " + "text": "): " }, { "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" }, { "kind": "Content", - "text": ";\n} & " - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 4 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ { - "kind": "Reference", - "text": "Omit", - "canonicalReference": "!Omit:type" - }, + "parameterName": "{ children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "OryCardContent" + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryCardContentProps:type", + "docComment": "/**\n * Props for the OryCardContent component.\n */\n", + "excerptTokens": [ { "kind": "Content", - "text": "<" + "text": "type OryCardContentProps = " }, { "kind": "Reference", - "text": "ComponentPropsWithoutRef", - "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" - }, - { - "kind": "Content", - "text": "<\"button\">, \"children\">" + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" }, { "kind": "Content", @@ -758,60 +710,29 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessButtonProps", + "name": "OryCardContentProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 2 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessCurrentIdentifierProps:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!OryCardDividerProps:type", + "docComment": "/**\n * Props type for the Form Group Divider component.\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessCurrentIdentifierProps = " - }, - { - "kind": "Content", - "text": "{\n attributes: " - }, - { - "kind": "Reference", - "text": "UiNodeInputAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" - }, - { - "kind": "Content", - "text": ";\n node: " - }, - { - "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" - }, - { - "kind": "Content", - "text": ";\n onClick?: () => void;\n href?: string;\n} & " - }, - { - "kind": "Reference", - "text": "Omit", - "canonicalReference": "!Omit:type" - }, - { - "kind": "Content", - "text": "<" + "text": "type OryCardDividerProps = " }, { "kind": "Reference", - "text": "ComponentPropsWithoutRef", - "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" + "text": "Record", + "canonicalReference": "!Record:type" }, { "kind": "Content", - "text": "<\"button\">, \"children\" | \"onClick\">" + "text": "" }, { "kind": "Content", @@ -820,47 +741,58 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessCurrentIdentifierProps", + "name": "OryCardDividerProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 3 } }, { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessFormProps:type", + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryCardFooter:function(1)", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessFormProps = " + "text": "declare function OryCardFooter(): " }, { "kind": "Reference", - "text": "ComponentPropsWithoutRef", - "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" }, { "kind": "Content", - "text": "<\"form\"> & {\n onSubmit: " - }, - { - "kind": "Reference", - "text": "FormEventHandler", - "canonicalReference": "@types/react!React.FormEventHandler:type" - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "OryCardFooter" + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryCardFooterProps:type", + "docComment": "", + "excerptTokens": [ { "kind": "Content", - "text": "<" + "text": "type OryCardFooterProps = " }, { "kind": "Reference", - "text": "HTMLFormElement", - "canonicalReference": "!HTMLFormElement:interface" + "text": "Record", + "canonicalReference": "!Record:type" }, { "kind": "Content", - "text": ">;\n}" + "text": "" }, { "kind": "Content", @@ -869,25 +801,25 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessFormProps", + "name": "OryCardFooterProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 7 + "endIndex": 3 } }, { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessGroupContainerProps:type", + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryCardHeader:function(1)", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessGroupContainerProps = " + "text": "declare function OryCardHeader(): " }, { "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" }, { "kind": "Content", @@ -895,39 +827,32 @@ } ], "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HeadlessGroupContainerProps", - "typeTokenRange": { + "returnTypeTokenRange": { "startIndex": 1, "endIndex": 2 - } + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "OryCardHeader" }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessGroupProps:type", + "canonicalReference": "@ory/elements-react!OryCardHeaderProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessGroupProps = " + "text": "type OryCardHeaderProps = " }, { "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" + "text": "Record", + "canonicalReference": "!Record:type" }, { "kind": "Content", - "text": "<{\n groups: " - }, - { - "kind": "Reference", - "text": "UiNodeGroupEnum", - "canonicalReference": "@ory/client-fetch!UiNodeGroupEnum:type" - }, - { - "kind": "Content", - "text": "[];\n}>" + "text": "" }, { "kind": "Content", @@ -936,42 +861,29 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessGroupProps", + "name": "OryCardHeaderProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 5 + "endIndex": 3 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessImageProps:type", + "canonicalReference": "@ory/elements-react!OryCardLogoProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessImageProps = " - }, - { - "kind": "Content", - "text": "{\n attributes: " - }, - { - "kind": "Reference", - "text": "UiNodeImageAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeImageAttributes:interface" - }, - { - "kind": "Content", - "text": ";\n node: " + "text": "type OryCardLogoProps = " }, { "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" + "text": "Record", + "canonicalReference": "!Record:type" }, { "kind": "Content", - "text": ";\n}" + "text": "" }, { "kind": "Content", @@ -980,51 +892,65 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessImageProps", + "name": "OryCardLogoProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 6 + "endIndex": 3 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessInputProps:type", + "canonicalReference": "@ory/elements-react!OryCardProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessInputProps = " - }, - { - "kind": "Content", - "text": "{\n attributes: " + "text": "type OryCardRootProps = " }, { "kind": "Reference", - "text": "UiNodeInputAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" }, { "kind": "Content", - "text": ";\n node: " + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryCardProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryCardValidationMessages:function(1)", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "declare function OryCardValidationMessages({ ...props }: " }, { "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" + "text": "OryMessageRootProps", + "canonicalReference": "@ory/elements-react!OryMessageRootProps:type" }, { "kind": "Content", - "text": ";\n onClick?: " + "text": "): " }, { "kind": "Reference", - "text": "MouseEventHandler", - "canonicalReference": "@types/react!React.MouseEventHandler:type" + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" }, { "kind": "Content", - "text": ";\n}" + "text": " | null" }, { "kind": "Content", @@ -1032,52 +958,54 @@ } ], "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, "releaseTag": "Public", - "name": "HeadlessInputProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 8 - } + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ ...props }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "OryCardValidationMessages" }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessLabelProps:type", + "canonicalReference": "@ory/elements-react!OryClientConfiguration:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessLabelProps = " - }, - { - "kind": "Content", - "text": "{\n attributes: " - }, - { - "kind": "Reference", - "text": "UiNodeInputAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" + "text": "type OryClientConfiguration = " }, { "kind": "Content", - "text": ";\n node: " + "text": "{\n name: string;\n logoUrl?: string;\n stylesheet?: string;\n favicon?: string;\n sdk: {\n url: string;\n options?: " }, { "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" + "text": "Partial", + "canonicalReference": "!Partial:type" }, { "kind": "Content", - "text": ";\n} & " + "text": "<" }, { "kind": "Reference", - "text": "ComponentPropsWithoutRef", - "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" + "text": "ConfigurationParameters", + "canonicalReference": "@ory/client-fetch!ConfigurationParameters:interface" }, { "kind": "Content", - "text": "<\"label\">" + "text": ">;\n };\n project: {\n registration_enabled: boolean;\n verification_enabled: boolean;\n recovery_enabled: boolean;\n recovery_ui_url: string;\n registration_ui_url: string;\n verification_ui_url: string;\n login_ui_url: string;\n };\n}" }, { "kind": "Content", @@ -1086,20 +1014,20 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessLabelProps", + "name": "OryClientConfiguration", "typeTokenRange": { "startIndex": 1, - "endIndex": 8 + "endIndex": 6 } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessLinkButtonProps:type", + "canonicalReference": "@ory/elements-react!OryCurrentIdentifierProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessLinkButtonProps = " + "text": "type OryCurrentIdentifierProps = " }, { "kind": "Content", @@ -1107,8 +1035,8 @@ }, { "kind": "Reference", - "text": "UiNodeAnchorAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeAnchorAttributes:interface" + "text": "UiNodeInputAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" }, { "kind": "Content", @@ -1121,7 +1049,7 @@ }, { "kind": "Content", - "text": ";\n} & " + "text": ";\n onClick?: () => void;\n href?: string;\n} & " }, { "kind": "Reference", @@ -1139,7 +1067,7 @@ }, { "kind": "Content", - "text": "<\"a\">, \"children\">" + "text": "<\"button\">, \"children\" | \"onClick\">" }, { "kind": "Content", @@ -1148,34 +1076,38 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "HeadlessLinkButtonProps", + "name": "OryCurrentIdentifierProps", "typeTokenRange": { "startIndex": 1, "endIndex": 10 } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!HeadlessMessage:function(1)", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryFlowComponentOverrides:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function HeadlessMessage({ message }: " + "text": "type OryFlowComponentOverrides = " }, { "kind": "Reference", - "text": "HeadlessMessageProps", - "canonicalReference": "@ory/elements-react!HeadlessMessageProps:type" + "text": "DeepPartialTwoLevels", + "canonicalReference": "@ory/elements-react!~DeepPartialTwoLevels:type" }, { "kind": "Content", - "text": "): " + "text": "<" }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "OryFlowComponents", + "canonicalReference": "@ory/elements-react!OryFlowComponents:type" + }, + { + "kind": "Content", + "text": ">" }, { "kind": "Content", @@ -1183,72 +1115,48 @@ } ], "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 4 - }, "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ message }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "HeadlessMessage" + "name": "OryFlowComponentOverrides", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 5 + } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessMessageProps:type", - "docComment": "", + "canonicalReference": "@ory/elements-react!OryFlowComponents:type", + "docComment": "/**\n * A record of all the components that are used in the OryForm component.\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type HeadlessMessageProps = " + "text": "type OryFlowComponents = " }, { "kind": "Content", - "text": "{\n message: " + "text": "{\n Node: {\n Button: " }, { "kind": "Reference", - "text": "UiText", - "canonicalReference": "@ory/client-fetch!UiText:interface" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": ";\n}" + "text": "<" }, { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HeadlessMessageProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 4 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessMessagesProps:type", - "docComment": "", - "excerptTokens": [ + "kind": "Reference", + "text": "OryNodeButtonProps", + "canonicalReference": "@ory/elements-react!OryNodeButtonProps:type" + }, { "kind": "Content", - "text": "type HeadlessMessagesProps = " + "text": ">;\n OidcButton: " }, { "kind": "Reference", - "text": "DetailedHTMLProps", - "canonicalReference": "@types/react!React.DetailedHTMLProps:type" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", @@ -1256,909 +1164,89 @@ }, { "kind": "Reference", - "text": "HTMLAttributes", - "canonicalReference": "@types/react!React.HTMLAttributes:interface" + "text": "OryNodeOidcButtonProps", + "canonicalReference": "@ory/elements-react!OryNodeOidcButtonProps:type" }, { "kind": "Content", - "text": "<" + "text": ">;\n CurrentIdentifierButton: " }, { "kind": "Reference", - "text": "HTMLDivElement", - "canonicalReference": "!HTMLDivElement:interface" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": ">, " + "text": "<" }, { "kind": "Reference", - "text": "HTMLDivElement", - "canonicalReference": "!HTMLDivElement:interface" + "text": "OryCurrentIdentifierProps", + "canonicalReference": "@ory/elements-react!OryCurrentIdentifierProps:type" }, { "kind": "Content", - "text": ">" + "text": ">;\n Anchor: " }, { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HeadlessMessagesProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 9 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessSocialButtonContainerProps:type", - "docComment": "", - "excerptTokens": [ + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, { "kind": "Content", - "text": "type HeadlessSocialButtonContainerProps = " + "text": "<" }, { "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" + "text": "OryNodeAnchorProps", + "canonicalReference": "@ory/elements-react!OryNodeAnchorProps:type" }, { "kind": "Content", - "text": "<{\n nodes: " + "text": ">;\n Input: " }, { "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": "[];\n}>" + "text": "<" }, { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HeadlessSocialButtonContainerProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 5 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessSocialButtonProps:type", - "docComment": "", - "excerptTokens": [ + "kind": "Reference", + "text": "OryNodeInputProps", + "canonicalReference": "@ory/elements-react!OryNodeInputProps:type" + }, { "kind": "Content", - "text": "type HeadlessSocialButtonProps = " + "text": ">;\n CodeInput: " }, { "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": "<{\n node: " + "text": "<" }, { "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" + "text": "OryNodeInputProps", + "canonicalReference": "@ory/elements-react!OryNodeInputProps:type" }, { "kind": "Content", - "text": ";\n attributes: " + "text": ">;\n Image: " }, { "kind": "Reference", - "text": "UiNodeInputAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" - }, - { - "kind": "Content", - "text": ";\n onClick?: () => void;\n}>" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HeadlessSocialButtonProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 7 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessSocialButtonsProps:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type HeadlessSocialButtonsProps = " - }, - { - "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" - }, - { - "kind": "Content", - "text": "<{\n hideDivider?: boolean;\n}>" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HeadlessSocialButtonsProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 3 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HeadlessTextProps:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type HeadlessTextProps = " - }, - { - "kind": "Content", - "text": "{\n attributes: " - }, - { - "kind": "Reference", - "text": "UiNodeTextAttributes", - "canonicalReference": "@ory/client-fetch!UiNodeTextAttributes:interface" - }, - { - "kind": "Content", - "text": ";\n node: " - }, - { - "kind": "Reference", - "text": "UiNode", - "canonicalReference": "@ory/client-fetch!UiNode:interface" - }, - { - "kind": "Content", - "text": ";\n}" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HeadlessTextProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 6 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!HorizontalDividerProps:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type HorizontalDividerProps = " - }, - { - "kind": "Reference", - "text": "Record", - "canonicalReference": "!Record:type" - }, - { - "kind": "Content", - "text": "" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "HorizontalDividerProps", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 3 - } - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!IntlProvider:function(1)", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "IntlProvider: ({ children, ...props }: " - }, - { - "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "IntlProviderProps", - "canonicalReference": "@ory/elements-react!IntlProviderProps:type" - }, - { - "kind": "Content", - "text": ">" - }, - { - "kind": "Content", - "text": ") => " - }, - { - "kind": "Content", - "text": "string | number | boolean | " - }, - { - "kind": "Reference", - "text": "Iterable", - "canonicalReference": "!Iterable:interface" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "react.ReactNode", - "canonicalReference": "@types/react!React.ReactNode:type" - }, - { - "kind": "Content", - "text": "> | " - }, - { - "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": " | null | undefined" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 12, - "endIndex": 19 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, ...props }", - "parameterTypeTokenRange": { - "startIndex": 7, - "endIndex": 11 - }, - "isOptional": false - } - ], - "typeParameters": [ - { - "typeParameterName": "T", - "constraintTokenRange": { - "startIndex": 1, - "endIndex": 4 - }, - "defaultTypeTokenRange": { - "startIndex": 5, - "endIndex": 6 - } - } - ], - "name": "IntlProvider" - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!IntlProviderProps:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type IntlProviderProps = " - }, - { - "kind": "Content", - "text": "Type extends " - }, - { - "kind": "Reference", - "text": "CustomTranslations", - "canonicalReference": "@ory/elements-react!CustomTranslations:type" - }, - { - "kind": "Content", - "text": " ? " - }, - { - "kind": "Reference", - "text": "CustomTranslations", - "canonicalReference": "@ory/elements-react!CustomTranslations:type" - }, - { - "kind": "Content", - "text": " : " - }, - { - "kind": "Reference", - "text": "SupportedTranslations", - "canonicalReference": "@ory/elements-react!SupportedTranslations:type" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "IntlProviderProps", - "typeParameters": [ - { - "typeParameterName": "Type", - "constraintTokenRange": { - "startIndex": 0, - "endIndex": 0 - }, - "defaultTypeTokenRange": { - "startIndex": 0, - "endIndex": 0 - } - } - ], - "typeTokenRange": { - "startIndex": 1, - "endIndex": 7 - } - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!isCustomTranslations:function(1)", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "isCustomTranslations: (o: " - }, - { - "kind": "Content", - "text": "unknown" - }, - { - "kind": "Content", - "text": ") => " - }, - { - "kind": "Reference", - "text": "o", - "canonicalReference": "@ory/elements-react!~o" - }, - { - "kind": "Content", - "text": " is " - }, - { - "kind": "Reference", - "text": "CustomTranslations", - "canonicalReference": "@ory/elements-react!CustomTranslations:type" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 6 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "o", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "isCustomTranslations" - }, - { - "kind": "Variable", - "canonicalReference": "@ory/elements-react!LanguageCodes:var", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "LanguageCodes: " - }, - { - "kind": "Content", - "text": "readonly [\"ab\", \"aa\", \"af\", \"sq\", \"am\", \"ar\", \"hy\", \"as\", \"ay\", \"az\", \"ba\", \"eu\", \"bn\", \"dz\", \"bh\", \"bi\", \"br\", \"bg\", \"my\", \"be\", \"km\", \"ca\", \"zh\", \"co\", \"hr\", \"cs\", \"da\", \"nl\", \"en\", \"eo\", \"et\", \"fo\", \"fj\", \"fi\", \"fr\", \"fy\", \"gd\", \"gl\", \"ka\", \"de\", \"el\", \"kl\", \"gn\", \"gu\", \"ha\", \"iw\", \"hi\", \"hu\", \"is\", \"in\", \"ia\", \"ie\", \"ik\", \"ga\", \"it\", \"ja\", \"jw\", \"kn\", \"ks\", \"kk\", \"rw\", \"ky\", \"rn\", \"ko\", \"ku\", \"lo\", \"la\", \"lv\", \"ln\", \"lt\", \"mk\", \"mg\", \"ms\", \"ml\", \"mt\", \"mi\", \"mr\", \"mo\", \"mn\", \"na\", \"ne\", \"no\", \"oc\", \"or\", \"om\", \"ps\", \"fa\", \"pl\", \"pt\", \"pa\", \"qu\", \"rm\", \"ro\", \"ru\", \"sm\", \"sg\", \"sa\", \"sr\", \"sh\", \"st\", \"tn\", \"sn\", \"sd\", \"si\", \"ss\", \"sk\", \"sl\", \"so\", \"es\", \"su\", \"sw\", \"sv\", \"tl\", \"tg\", \"ta\", \"tt\", \"te\", \"th\", \"bo\", \"ti\", \"to\", \"ts\", \"tr\", \"tk\", \"tw\", \"uk\", \"ur\", \"uz\", \"vi\", \"vo\", \"cy\", \"wo\", \"xh\", \"ji\", \"yo\", \"zu\"]" - } - ], - "fileUrlPath": "dist/index.d.ts", - "isReadonly": true, - "releaseTag": "Public", - "name": "LanguageCodes", - "variableTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!Locale:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type Locale = " - }, - { - "kind": "Content", - "text": "keyof typeof " - }, - { - "kind": "Reference", - "text": "locales", - "canonicalReference": "@ory/elements-react!OryLocales:namespace" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "Locale", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 3 - } - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!LoginFlowContainer:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type LoginFlowContainer = " - }, - { - "kind": "Reference", - "text": "BaseFlow", - "canonicalReference": "@ory/elements-react!~BaseFlow:type" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "FlowType.Login", - "canonicalReference": "@ory/client-fetch!FlowType.Login:member" - }, - { - "kind": "Content", - "text": ", " - }, - { - "kind": "Reference", - "text": "LoginFlow", - "canonicalReference": "@ory/client-fetch!LoginFlow:interface" - }, - { - "kind": "Content", - "text": ">" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "LoginFlowContainer", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 7 - } - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!messageTestId:function(1)", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "declare function messageTestId(message: " - }, - { - "kind": "Reference", - "text": "UiText", - "canonicalReference": "@ory/client-fetch!UiText:interface" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "{\n \"data-testid\": string;\n}" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 4 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "message", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "messageTestId" - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OnSubmitHandlerProps:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type OnSubmitHandlerProps = " - }, - { - "kind": "Content", - "text": "{\n setFlowContainer: (flowContainer: " - }, - { - "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" - }, - { - "kind": "Content", - "text": ") => void;\n body: T;\n onRedirect: " - }, - { - "kind": "Reference", - "text": "OnRedirectHandler", - "canonicalReference": "@ory/client-fetch!OnRedirectHandler:type" - }, - { - "kind": "Content", - "text": ";\n}" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "OnSubmitHandlerProps", - "typeParameters": [ - { - "typeParameterName": "T", - "constraintTokenRange": { - "startIndex": 1, - "endIndex": 10 - }, - "defaultTypeTokenRange": { - "startIndex": 0, - "endIndex": 0 - } - } - ], - "typeTokenRange": { - "startIndex": 11, - "endIndex": 16 - } - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!onSubmitLogin:function(1)", - "docComment": "/**\n * Use this method to submit a login flow. This method is used in the `onSubmit` handler of the login form.\n *\n * @param config - The configuration object.\n *\n * @param flow - The flow object.\n *\n * @param setFlowContainer - This method is used to update the flow container when a validation error occurs, for example.\n *\n * @param body - The form values to submit.\n *\n * @param onRedirect - This method is used to redirect the user to a different page.\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "declare function onSubmitLogin({ config, flow }: " - }, - { - "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" - }, - { - "kind": "Content", - "text": ", { setFlowContainer, body, onRedirect, }: " - }, - { - "kind": "Reference", - "text": "OnSubmitHandlerProps", - "canonicalReference": "@ory/elements-react!OnSubmitHandlerProps:type" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "UpdateLoginFlowBody", - "canonicalReference": "@ory/client-fetch!UpdateLoginFlowBody:type" - }, - { - "kind": "Content", - "text": ">" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Reference", - "text": "Promise", - "canonicalReference": "!Promise:interface" - }, - { - "kind": "Content", - "text": "" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 8, - "endIndex": 10 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ config, flow }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - }, - { - "parameterName": "{ setFlowContainer, body, onRedirect, }", - "parameterTypeTokenRange": { - "startIndex": 3, - "endIndex": 7 - }, - "isOptional": false - } - ], - "name": "onSubmitLogin" - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!onSubmitRecovery:function(1)", - "docComment": "/**\n * Use this method to submit a recovery flow. This method is used in the `onSubmit` handler of the recovery form.\n *\n * @param config - The configuration object.\n *\n * @param flow - The flow object.\n *\n * @param setFlowContainer - This method is used to update the flow container when a validation error occurs, for example.\n *\n * @param body - The form values to submit.\n *\n * @param onRedirect - This method is used to redirect the user to a different page.\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "declare function onSubmitRecovery({ config, flow }: " - }, - { - "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" - }, - { - "kind": "Content", - "text": ", { setFlowContainer, body, onRedirect, }: " - }, - { - "kind": "Reference", - "text": "OnSubmitHandlerProps", - "canonicalReference": "@ory/elements-react!OnSubmitHandlerProps:type" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "UpdateRecoveryFlowBody", - "canonicalReference": "@ory/client-fetch!UpdateRecoveryFlowBody:type" - }, - { - "kind": "Content", - "text": ">" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Reference", - "text": "Promise", - "canonicalReference": "!Promise:interface" - }, - { - "kind": "Content", - "text": "" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 8, - "endIndex": 10 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ config, flow }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - }, - { - "parameterName": "{ setFlowContainer, body, onRedirect, }", - "parameterTypeTokenRange": { - "startIndex": 3, - "endIndex": 7 - }, - "isOptional": false - } - ], - "name": "onSubmitRecovery" - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!onSubmitRegistration:function(1)", - "docComment": "/**\n * Use this method to submit a registration flow. This method is used in the `onSubmit` handler of the registration form.\n *\n * @param config - The configuration object.\n *\n * @param flow - The flow object.\n *\n * @param setFlowContainer - This method is used to update the flow container when a validation error occurs, for example.\n *\n * @param body - The form values to submit.\n *\n * @param onRedirect - This method is used to redirect the user to a different page.\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "declare function onSubmitRegistration({ config, flow }: " - }, - { - "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" - }, - { - "kind": "Content", - "text": ", { setFlowContainer, body, onRedirect, }: " - }, - { - "kind": "Reference", - "text": "OnSubmitHandlerProps", - "canonicalReference": "@ory/elements-react!OnSubmitHandlerProps:type" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", @@ -2166,80 +1254,17 @@ }, { "kind": "Reference", - "text": "UpdateRegistrationFlowBody", - "canonicalReference": "@ory/client-fetch!UpdateRegistrationFlowBody:type" - }, - { - "kind": "Content", - "text": ">" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Reference", - "text": "Promise", - "canonicalReference": "!Promise:interface" - }, - { - "kind": "Content", - "text": "" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 8, - "endIndex": 10 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ config, flow }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - }, - { - "parameterName": "{ setFlowContainer, body, onRedirect, }", - "parameterTypeTokenRange": { - "startIndex": 3, - "endIndex": 7 - }, - "isOptional": false - } - ], - "name": "onSubmitRegistration" - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!onSubmitSettings:function(1)", - "docComment": "/**\n * Use this method to submit a settings flow. This method is used in the `onSubmit` handler of the settings form.\n *\n * @param config - The configuration object.\n *\n * @param flow - The flow object.\n *\n * @param setFlowContainer - This method is used to update the flow container when a validation error occurs, for example.\n *\n * @param body - The form values to submit.\n *\n * @param onRedirect - This method is used to redirect the user to a different page.\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "declare function onSubmitSettings({ config, flow }: " - }, - { - "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" + "text": "OryNodeImageProps", + "canonicalReference": "@ory/elements-react!OryNodeImageProps:type" }, { "kind": "Content", - "text": ", { setFlowContainer, body, onRedirect, }: " + "text": ">;\n Label: " }, { "kind": "Reference", - "text": "OnSubmitHandlerProps", - "canonicalReference": "@ory/elements-react!OnSubmitHandlerProps:type" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", @@ -2247,80 +1272,35 @@ }, { "kind": "Reference", - "text": "UpdateSettingsFlowBody", - "canonicalReference": "@ory/client-fetch!UpdateSettingsFlowBody:type" + "text": "OryNodeLabelProps", + "canonicalReference": "@ory/elements-react!OryNodeLabelProps:type" }, { "kind": "Content", - "text": ">" - }, - { - "kind": "Content", - "text": "): " + "text": ">;\n Checkbox: " }, { "kind": "Reference", - "text": "Promise", - "canonicalReference": "!Promise:interface" - }, - { - "kind": "Content", - "text": "" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 8, - "endIndex": 10 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ config, flow }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - }, - { - "parameterName": "{ setFlowContainer, body, onRedirect, }", - "parameterTypeTokenRange": { - "startIndex": 3, - "endIndex": 7 - }, - "isOptional": false - } - ], - "name": "onSubmitSettings" - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!onSubmitVerification:function(1)", - "docComment": "/**\n * Use this method to submit a verification flow. This method is used in the `onSubmit` handler of the verification form.\n *\n * @param config - The configuration object.\n *\n * @param flow - The flow object.\n *\n * @param setFlowContainer - This method is used to update the flow container when a validation error occurs, for example.\n *\n * @param body - The form values to submit.\n *\n * @param onRedirect - This method is used to redirect the user to a different page.\n */\n", - "excerptTokens": [ + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, { "kind": "Content", - "text": "declare function onSubmitVerification({ config, flow }: " + "text": "<" }, { "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" + "text": "OryNodeInputProps", + "canonicalReference": "@ory/elements-react!OryNodeInputProps:type" }, { "kind": "Content", - "text": ", { setFlowContainer, body, onRedirect, }: " + "text": ">;\n Text: " }, { "kind": "Reference", - "text": "OnSubmitHandlerProps", - "canonicalReference": "@ory/elements-react!OnSubmitHandlerProps:type" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", @@ -2328,117 +1308,102 @@ }, { "kind": "Reference", - "text": "UpdateVerificationFlowBody", - "canonicalReference": "@ory/client-fetch!UpdateVerificationFlowBody:type" + "text": "OryNodeTextProps", + "canonicalReference": "@ory/elements-react!OryNodeTextProps:type" }, { "kind": "Content", - "text": ">" + "text": ">;\n };\n Card: {\n Root: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": "): " + "text": "<" }, { "kind": "Reference", - "text": "Promise", - "canonicalReference": "!Promise:interface" + "text": "OryCardRootProps", + "canonicalReference": "@ory/elements-react!OryCardProps:type" }, { "kind": "Content", - "text": "" + "text": ">;\n Footer: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 8, - "endIndex": 10 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ + "text": "<" + }, { - "parameterName": "{ config, flow }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false + "kind": "Reference", + "text": "OryCardFooterProps", + "canonicalReference": "@ory/elements-react!OryCardFooterProps:type" }, { - "parameterName": "{ setFlowContainer, body, onRedirect, }", - "parameterTypeTokenRange": { - "startIndex": 3, - "endIndex": 7 - }, - "isOptional": false - } - ], - "name": "onSubmitVerification" - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryCard:function(1)", - "docComment": "", - "excerptTokens": [ + "kind": "Content", + "text": ">;\n Header: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, { "kind": "Content", - "text": "declare function OryCard({ children }: " + "text": "<" }, { "kind": "Reference", - "text": "OryCardProps", + "text": "OryCardRootProps", "canonicalReference": "@ory/elements-react!OryCardProps:type" }, { "kind": "Content", - "text": "): " + "text": ">;\n Content: " }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 4 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ + "text": "<" + }, { - "parameterName": "{ children }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "OryCard" - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryCardComponents:type", - "docComment": "/**\n * Card components are used to show login, registration, recovery, and verification flows.\n */\n", - "excerptTokens": [ + "kind": "Reference", + "text": "OryCardContentProps", + "canonicalReference": "@ory/elements-react!OryCardContentProps:type" + }, + { + "kind": "Content", + "text": ">;\n Logo: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, { "kind": "Content", - "text": "type OryCardComponents = " + "text": "<" + }, + { + "kind": "Reference", + "text": "OryCardLogoProps", + "canonicalReference": "@ory/elements-react!OryCardLogoProps:type" }, { "kind": "Content", - "text": "{\n Card: " + "text": ">;\n Divider: " }, { "kind": "Reference", @@ -2451,12 +1416,12 @@ }, { "kind": "Reference", - "text": "OryCardProps", - "canonicalReference": "@ory/elements-react!OryCardProps:type" + "text": "OryCardDividerProps", + "canonicalReference": "@ory/elements-react!OryCardDividerProps:type" }, { "kind": "Content", - "text": ">;\n CardFooter: " + "text": ">;\n AuthMethodListItem: " }, { "kind": "Reference", @@ -2469,12 +1434,12 @@ }, { "kind": "Reference", - "text": "OryCardFooterProps", - "canonicalReference": "@ory/elements-react!OryCardFooterProps:type" + "text": "OryCardAuthMethodListItemProps", + "canonicalReference": "@ory/elements-react!OryCardAuthMethodListItemProps:type" }, { "kind": "Content", - "text": ">;\n CardHeader: " + "text": ">;\n };\n Form: {\n Root: " }, { "kind": "Reference", @@ -2487,12 +1452,12 @@ }, { "kind": "Reference", - "text": "OryCardProps", - "canonicalReference": "@ory/elements-react!OryCardProps:type" + "text": "OryFormRootProps", + "canonicalReference": "@ory/elements-react!OryFormRootProps:type" }, { "kind": "Content", - "text": ">;\n CardContent: " + "text": ">;\n OidcRoot: " }, { "kind": "Reference", @@ -2505,12 +1470,12 @@ }, { "kind": "Reference", - "text": "OryCardContentProps", - "canonicalReference": "@ory/elements-react!OryCardContentProps:type" + "text": "OryFormOidcRootProps", + "canonicalReference": "@ory/elements-react!OryFormOidcRootProps:type" }, { "kind": "Content", - "text": ">;\n CardLogo: " + "text": ">;\n Group: " }, { "kind": "Reference", @@ -2519,81 +1484,52 @@ }, { "kind": "Content", - "text": ";\n}" + "text": "<" }, { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "OryCardComponents", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 20 - } - }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryCardContent:function(1)", - "docComment": "", - "excerptTokens": [ + "kind": "Reference", + "text": "OryFormGroupProps", + "canonicalReference": "@ory/elements-react!OryFormGroupProps:type" + }, { "kind": "Content", - "text": "declare function OryCardContent({ children }: " + "text": ">;\n };\n Message: {\n Root: " }, { "kind": "Reference", - "text": "OryCardContentProps", - "canonicalReference": "@ory/elements-react!OryCardContentProps:type" + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" }, { "kind": "Content", - "text": "): " + "text": "<" }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "OryMessageRootProps", + "canonicalReference": "@ory/elements-react!OryMessageRootProps:type" }, { "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 4 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ + "text": ">;\n Content: " + }, { - "parameterName": "{ children }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "OryCardContent" - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryCardContentProps:type", - "docComment": "", - "excerptTokens": [ + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, { "kind": "Content", - "text": "type OryCardContentProps = " + "text": "<" }, { "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" + "text": "OryMessageContentProps", + "canonicalReference": "@ory/elements-react!OryMessageContentProps:type" + }, + { + "kind": "Content", + "text": ">;\n };\n}" }, { "kind": "Content", @@ -2602,58 +1538,61 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryCardContentProps", + "name": "OryFlowComponents", "typeTokenRange": { "startIndex": 1, - "endIndex": 2 + "endIndex": 90 } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryCardFooter:function(1)", - "docComment": "", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryFlowContainer:type", + "docComment": "/**\n * A union type of all flow containers\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryCardFooter(): " + "text": "type OryFlowContainer = " }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "LoginFlowContainer", + "canonicalReference": "@ory/elements-react!LoginFlowContainer:type" }, { "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [], - "name": "OryCardFooter" - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryCardFooterProps:type", - "docComment": "", - "excerptTokens": [ + "text": " | " + }, + { + "kind": "Reference", + "text": "RegistrationFlowContainer", + "canonicalReference": "@ory/elements-react!RegistrationFlowContainer:type" + }, { "kind": "Content", - "text": "type OryCardFooterProps = " + "text": " | " }, { "kind": "Reference", - "text": "Record", - "canonicalReference": "!Record:type" + "text": "RecoveryFlowContainer", + "canonicalReference": "@ory/elements-react!RecoveryFlowContainer:type" }, { "kind": "Content", - "text": "" + "text": " | " + }, + { + "kind": "Reference", + "text": "VerificationFlowContainer", + "canonicalReference": "@ory/elements-react!VerificationFlowContainer:type" + }, + { + "kind": "Content", + "text": " | " + }, + { + "kind": "Reference", + "text": "SettingsFlowContainer", + "canonicalReference": "@ory/elements-react!SettingsFlowContainer:type" }, { "kind": "Content", @@ -2662,20 +1601,33 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryCardFooterProps", + "name": "OryFlowContainer", "typeTokenRange": { "startIndex": 1, - "endIndex": 3 + "endIndex": 10 } }, { "kind": "Function", - "canonicalReference": "@ory/elements-react!OryCardHeader:function(1)", + "canonicalReference": "@ory/elements-react!OryForm:function(1)", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryCardHeader(): " + "text": "declare function OryForm({ children }: " + }, + { + "kind": "Reference", + "text": "OryFormProps", + "canonicalReference": "@ory/elements-react!OryFormProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "string | " }, { "kind": "Reference", @@ -2689,31 +1641,40 @@ ], "fileUrlPath": "dist/index.d.ts", "returnTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 + "startIndex": 3, + "endIndex": 5 }, "releaseTag": "Public", "overloadIndex": 1, - "parameters": [], - "name": "OryCardHeader" + "parameters": [ + { + "parameterName": "{ children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "OryForm" }, { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryCardHeaderProps:type", - "docComment": "", + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryFormGroupDivider:function(1)", + "docComment": "/**\n * Renders the\n *\n * @returns \n *\n * @see\n *\n * Card.Divider between the groups of nodes in the Ory Form.\n *\n * You can use this component to build fully custom implementations of the Ory Flows.\n *\n * However, you most likely want to override the individual components instead.\n */\n", "excerptTokens": [ { "kind": "Content", - "text": "type OryCardHeaderProps = " + "text": "declare function OryFormGroupDivider(): " }, { "kind": "Reference", - "text": "Record", - "canonicalReference": "!Record:type" + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" }, { "kind": "Content", - "text": "" + "text": " | null" }, { "kind": "Content", @@ -2721,21 +1682,23 @@ } ], "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "OryCardHeaderProps", - "typeTokenRange": { + "returnTypeTokenRange": { "startIndex": 1, "endIndex": 3 - } + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "OryFormGroupDivider" }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryCardProps:type", + "canonicalReference": "@ory/elements-react!OryFormGroupProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type OryCardProps = " + "text": "type OryFormGroupProps = " }, { "kind": "Reference", @@ -2749,7 +1712,7 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryCardProps", + "name": "OryFormGroupProps", "typeTokenRange": { "startIndex": 1, "endIndex": 2 @@ -2757,17 +1720,17 @@ }, { "kind": "Function", - "canonicalReference": "@ory/elements-react!OryCardValidationMessages:function(1)", + "canonicalReference": "@ory/elements-react!OryFormGroups:function(1)", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryCardValidationMessages({ ...props }: " + "text": "declare function OryFormGroups({ children, groups }: " }, { "kind": "Reference", - "text": "HeadlessMessagesProps", - "canonicalReference": "@ory/elements-react!HeadlessMessagesProps:type" + "text": "OryFormGroupsProps", + "canonicalReference": "@ory/elements-react!OryFormGroupsProps:type" }, { "kind": "Content", @@ -2778,10 +1741,6 @@ "text": "react_jsx_runtime.JSX.Element", "canonicalReference": "@types/react!JSX.Element:interface" }, - { - "kind": "Content", - "text": " | null" - }, { "kind": "Content", "text": ";" @@ -2790,13 +1749,13 @@ "fileUrlPath": "dist/index.d.ts", "returnTypeTokenRange": { "startIndex": 3, - "endIndex": 5 + "endIndex": 4 }, "releaseTag": "Public", "overloadIndex": 1, "parameters": [ { - "parameterName": "{ ...props }", + "parameterName": "{ children, groups }", "parameterTypeTokenRange": { "startIndex": 1, "endIndex": 2 @@ -2804,38 +1763,34 @@ "isOptional": false } ], - "name": "OryCardValidationMessages" + "name": "OryFormGroups" }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryClientConfiguration:type", + "canonicalReference": "@ory/elements-react!OryFormGroupsProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type OryClientConfiguration = " - }, - { - "kind": "Content", - "text": "{\n name: string;\n logoUrl?: string;\n stylesheet?: string;\n favicon?: string;\n sdk: {\n url: string;\n options?: " + "text": "type OryFormGroupsProps = " }, { "kind": "Reference", - "text": "Partial", - "canonicalReference": "!Partial:type" + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" }, { "kind": "Content", - "text": "<" + "text": "<{\n groups: " }, { "kind": "Reference", - "text": "ConfigurationParameters", - "canonicalReference": "@ory/client-fetch!ConfigurationParameters:interface" + "text": "UiNodeGroupEnum", + "canonicalReference": "@ory/client-fetch!UiNodeGroupEnum:type" }, { "kind": "Content", - "text": ">;\n };\n project: {\n registration_enabled: boolean;\n verification_enabled: boolean;\n recovery_enabled: boolean;\n recovery_ui_url: string;\n registration_ui_url: string;\n verification_ui_url: string;\n login_ui_url: string;\n };\n}" + "text": "[];\n}>" }, { "kind": "Content", @@ -2844,38 +1799,25 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryClientConfiguration", + "name": "OryFormGroupsProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 6 + "endIndex": 5 } }, { "kind": "Function", - "canonicalReference": "@ory/elements-react!OryComponentProvider:function(1)", + "canonicalReference": "@ory/elements-react!OryFormOidcButtons:function(1)", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryComponentProvider({ children, components, nodeSorter, }: " - }, - { - "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" - }, - { - "kind": "Content", - "text": "<" + "text": "declare function OryFormOidcButtons({ children, hideDivider, }: " }, { "kind": "Reference", - "text": "ComponentProviderProps", - "canonicalReference": "@ory/elements-react!~ComponentProviderProps:type" - }, - { - "kind": "Content", - "text": ">" + "text": "OryFormOidcButtonsProps", + "canonicalReference": "@ory/elements-react!OryFormOidcButtonsProps:type" }, { "kind": "Content", @@ -2886,6 +1828,10 @@ "text": "react_jsx_runtime.JSX.Element", "canonicalReference": "@types/react!JSX.Element:interface" }, + { + "kind": "Content", + "text": " | null" + }, { "kind": "Content", "text": ";" @@ -2893,45 +1839,40 @@ ], "fileUrlPath": "dist/index.d.ts", "returnTypeTokenRange": { - "startIndex": 6, - "endIndex": 7 + "startIndex": 3, + "endIndex": 5 }, "releaseTag": "Public", "overloadIndex": 1, "parameters": [ { - "parameterName": "{ children, components, nodeSorter, }", + "parameterName": "{ children, hideDivider, }", "parameterTypeTokenRange": { "startIndex": 1, - "endIndex": 5 + "endIndex": 2 }, "isOptional": false } ], - "name": "OryComponentProvider" + "name": "OryFormOidcButtons" }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryFlowComponents:type", + "canonicalReference": "@ory/elements-react!OryFormOidcButtonsProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type OryFlowComponents = " + "text": "type OryFormOidcButtonsProps = " }, { "kind": "Reference", - "text": "OryFormComponents", - "canonicalReference": "@ory/elements-react!OryFormComponents:type" + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" }, { "kind": "Content", - "text": " & " - }, - { - "kind": "Reference", - "text": "OryCardComponents", - "canonicalReference": "@ory/elements-react!OryCardComponents:type" + "text": "<{\n hideDivider?: boolean;\n}>" }, { "kind": "Content", @@ -2940,34 +1881,38 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryFlowComponents", + "name": "OryFormOidcButtonsProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 4 + "endIndex": 3 } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryFlowProvider:function(1)", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryFormOidcRootProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryFlowProvider({ children, ...container }: " + "text": "type OryFormOidcRootProps = " }, { "kind": "Reference", - "text": "OryFlowProviderProps", - "canonicalReference": "@ory/elements-react!OryFlowProviderProps:type" + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" }, { "kind": "Content", - "text": "): " + "text": "<{\n nodes: " }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": "[];\n}>" }, { "kind": "Content", @@ -2975,51 +1920,27 @@ } ], "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 4 - }, "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, ...container }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "OryFlowProvider" + "name": "OryFormOidcRootProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 5 + } }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryFlowProviderProps:type", + "canonicalReference": "@ory/elements-react!OryFormProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type OryFlowProviderProps = " + "text": "type OryFormProps = " }, { "kind": "Reference", "text": "PropsWithChildren", "canonicalReference": "@types/react!React.PropsWithChildren:type" }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" - }, - { - "kind": "Content", - "text": ">" - }, { "kind": "Content", "text": ";" @@ -3027,38 +1948,47 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryFlowProviderProps", + "name": "OryFormProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 5 + "endIndex": 2 } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryForm:function(1)", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryFormRootProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryForm({ children }: " + "text": "type OryFormRootProps = " }, { "kind": "Reference", - "text": "OryFormProps", - "canonicalReference": "@ory/elements-react!OryFormProps:type" + "text": "ComponentPropsWithoutRef", + "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" }, { "kind": "Content", - "text": "): " + "text": "<\"form\"> & {\n onSubmit: " + }, + { + "kind": "Reference", + "text": "FormEventHandler", + "canonicalReference": "@types/react!React.FormEventHandler:type" }, { "kind": "Content", - "text": "string | " + "text": "<" }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "HTMLFormElement", + "canonicalReference": "!HTMLFormElement:interface" + }, + { + "kind": "Content", + "text": ">;\n}" }, { "kind": "Content", @@ -3066,167 +1996,172 @@ } ], "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "OryForm" + "name": "OryFormRootProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 7 + } }, { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryFormComponents:type", + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryFormSocialButtonsForm:function(1)", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type OryFormComponents = " - }, - { - "kind": "Content", - "text": "{\n Button: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" - }, - { - "kind": "Content", - "text": "<" + "text": "declare function OryFormSocialButtonsForm(): " }, { "kind": "Reference", - "text": "HeadlessButtonProps", - "canonicalReference": "@ory/elements-react!HeadlessButtonProps:type" + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" }, { "kind": "Content", - "text": ">;\n LinkButton: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": " | null" }, { "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "HeadlessLinkButtonProps", - "canonicalReference": "@ory/elements-react!HeadlessLinkButtonProps:type" - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "OryFormSocialButtonsForm" + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryIntlProviderProps:type", + "docComment": "", + "excerptTokens": [ { "kind": "Content", - "text": ">;\n Input: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "type OryIntlProviderProps = " }, { "kind": "Content", - "text": "<" + "text": "Translation extends " }, { "kind": "Reference", - "text": "HeadlessInputProps", - "canonicalReference": "@ory/elements-react!HeadlessInputProps:type" + "text": "CustomTranslations", + "canonicalReference": "@ory/elements-react!~CustomTranslations:type" }, { "kind": "Content", - "text": ">;\n PinCodeInput: " + "text": " ? " }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "CustomTranslations", + "canonicalReference": "@ory/elements-react!~CustomTranslations:type" }, { "kind": "Content", - "text": "<" + "text": " : " }, { "kind": "Reference", - "text": "HeadlessInputProps", - "canonicalReference": "@ory/elements-react!HeadlessInputProps:type" + "text": "SupportedTranslations", + "canonicalReference": "@ory/elements-react!SupportedTranslations:type" }, { "kind": "Content", - "text": ">;\n Image: " - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryIntlProviderProps", + "typeParameters": [ { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" - }, + "typeParameterName": "Translation", + "constraintTokenRange": { + "startIndex": 0, + "endIndex": 0 + }, + "defaultTypeTokenRange": { + "startIndex": 0, + "endIndex": 0 + } + } + ], + "typeTokenRange": { + "startIndex": 1, + "endIndex": 7 + } + }, + { + "kind": "Namespace", + "canonicalReference": "@ory/elements-react!OryLocales:namespace", + "docComment": "", + "excerptTokens": [ { "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "HeadlessImageProps", - "canonicalReference": "@ory/elements-react!HeadlessImageProps:type" - }, + "text": "declare namespace locales " + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryLocales", + "preserveMemberOrder": false, + "members": [] + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryMessageContentProps:type", + "docComment": "", + "excerptTokens": [ { "kind": "Content", - "text": ">;\n Label: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "type OryMessageContentProps = " }, { "kind": "Content", - "text": "<" + "text": "{\n message: " }, { "kind": "Reference", - "text": "HeadlessLabelProps", - "canonicalReference": "@ory/elements-react!HeadlessLabelProps:type" + "text": "UiText", + "canonicalReference": "@ory/client-fetch!UiText:interface" }, { "kind": "Content", - "text": ">;\n Checkbox: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": ";\n}" }, { "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "HeadlessInputProps", - "canonicalReference": "@ory/elements-react!HeadlessInputProps:type" - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryMessageContentProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 4 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryMessageRootProps:type", + "docComment": "", + "excerptTokens": [ { "kind": "Content", - "text": ">;\n Text: " + "text": "type OryMessageRootProps = " }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "DetailedHTMLProps", + "canonicalReference": "@types/react!React.DetailedHTMLProps:type" }, { "kind": "Content", @@ -3234,71 +2169,79 @@ }, { "kind": "Reference", - "text": "HeadlessTextProps", - "canonicalReference": "@ory/elements-react!HeadlessTextProps:type" + "text": "HTMLAttributes", + "canonicalReference": "@types/react!React.HTMLAttributes:interface" }, { "kind": "Content", - "text": ">;\n FormContainer: " + "text": "<" }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "HTMLDivElement", + "canonicalReference": "!HTMLDivElement:interface" }, { "kind": "Content", - "text": "<" + "text": ">, " }, { "kind": "Reference", - "text": "HeadlessFormProps", - "canonicalReference": "@ory/elements-react!HeadlessFormProps:type" + "text": "HTMLDivElement", + "canonicalReference": "!HTMLDivElement:interface" }, { "kind": "Content", - "text": ">;\n SocialButton: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": ">" }, { "kind": "Content", - "text": "<" - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryMessageRootProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 9 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryNodeAnchorProps:type", + "docComment": "", + "excerptTokens": [ { - "kind": "Reference", - "text": "HeadlessSocialButtonProps", - "canonicalReference": "@ory/elements-react!HeadlessSocialButtonProps:type" + "kind": "Content", + "text": "type OryNodeAnchorProps = " }, { "kind": "Content", - "text": ">;\n SocialButtonContainer: " + "text": "{\n attributes: " }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "UiNodeAnchorAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeAnchorAttributes:interface" }, { "kind": "Content", - "text": "<" + "text": ";\n node: " }, { "kind": "Reference", - "text": "HeadlessSocialButtonContainerProps", - "canonicalReference": "@ory/elements-react!HeadlessSocialButtonContainerProps:type" + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" }, { "kind": "Content", - "text": ">;\n AuthMethodListItem: " + "text": ";\n} & " }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "Omit", + "canonicalReference": "!Omit:type" }, { "kind": "Content", @@ -3306,53 +2249,61 @@ }, { "kind": "Reference", - "text": "HeadlessAuthMethodListItemProps", - "canonicalReference": "@ory/elements-react!HeadlessAuthMethodListItemProps:type" + "text": "ComponentPropsWithoutRef", + "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" }, { "kind": "Content", - "text": ">;\n HorizontalDivider: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "<\"a\">, \"children\">" }, { "kind": "Content", - "text": "<" - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryNodeAnchorProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 10 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryNodeButtonProps:type", + "docComment": "", + "excerptTokens": [ { - "kind": "Reference", - "text": "HorizontalDividerProps", - "canonicalReference": "@ory/elements-react!HorizontalDividerProps:type" + "kind": "Content", + "text": "type OryNodeButtonProps = " }, { "kind": "Content", - "text": ">;\n FormGroup: " + "text": "{\n attributes: " }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "UiNodeInputAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" }, { "kind": "Content", - "text": "<" + "text": ";\n node: " }, { "kind": "Reference", - "text": "HeadlessGroupContainerProps", - "canonicalReference": "@ory/elements-react!HeadlessGroupContainerProps:type" + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" }, { "kind": "Content", - "text": ">;\n MessageContainer: " + "text": ";\n} & " }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "Omit", + "canonicalReference": "!Omit:type" }, { "kind": "Content", @@ -3360,48 +2311,56 @@ }, { "kind": "Reference", - "text": "HeadlessMessagesProps", - "canonicalReference": "@ory/elements-react!HeadlessMessagesProps:type" + "text": "ComponentPropsWithoutRef", + "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" }, { "kind": "Content", - "text": ">;\n Message: " - }, - { - "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "<\"button\">, \"children\">" }, { "kind": "Content", - "text": "<" - }, + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryNodeButtonProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 10 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryNodeImageProps:type", + "docComment": "", + "excerptTokens": [ { - "kind": "Reference", - "text": "HeadlessMessageProps", - "canonicalReference": "@ory/elements-react!HeadlessMessageProps:type" + "kind": "Content", + "text": "type OryNodeImageProps = " }, { "kind": "Content", - "text": ">;\n CurrentIdentifierButton: " + "text": "{\n attributes: " }, { "kind": "Reference", - "text": "ComponentType", - "canonicalReference": "@types/react!React.ComponentType:type" + "text": "UiNodeImageAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeImageAttributes:interface" }, { "kind": "Content", - "text": "<" + "text": ";\n node: " }, { "kind": "Reference", - "text": "HeadlessCurrentIdentifierProps", - "canonicalReference": "@ory/elements-react!HeadlessCurrentIdentifierProps:type" + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" }, { "kind": "Content", - "text": ">;\n}" + "text": ";\n}" }, { "kind": "Content", @@ -3410,29 +2369,51 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryFormComponents", + "name": "OryNodeImageProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 70 + "endIndex": 6 } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryFormGroupDivider:function(1)", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryNodeInputProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryFormGroupDivider(): " + "text": "type OryNodeInputProps = " + }, + { + "kind": "Content", + "text": "{\n attributes: " + }, + { + "kind": "Reference", + "text": "UiNodeInputAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" + }, + { + "kind": "Content", + "text": ";\n node: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n onClick?: " }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "MouseEventHandler", + "canonicalReference": "@types/react!React.MouseEventHandler:type" }, { "kind": "Content", - "text": " | null" + "text": ";\n}" }, { "kind": "Content", @@ -3440,75 +2421,52 @@ } ], "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 1, - "endIndex": 3 - }, "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [], - "name": "OryFormGroupDivider" + "name": "OryNodeInputProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 8 + } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryFormGroups:function(1)", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryNodeLabelProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryFormGroups({ children, groups }: " - }, - { - "kind": "Reference", - "text": "HeadlessGroupProps", - "canonicalReference": "@ory/elements-react!HeadlessGroupProps:type" + "text": "type OryNodeLabelProps = " }, { "kind": "Content", - "text": "): " + "text": "{\n attributes: " }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "UiNodeInputAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" }, { "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 4 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ + "text": ";\n node: " + }, { - "parameterName": "{ children, groups }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "OryFormGroups" - }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!OryFormProps:type", - "docComment": "", - "excerptTokens": [ + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, { "kind": "Content", - "text": "type OryFormProps = " + "text": ";\n} & " }, { "kind": "Reference", - "text": "PropsWithChildren", - "canonicalReference": "@types/react!React.PropsWithChildren:type" + "text": "ComponentPropsWithoutRef", + "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" + }, + { + "kind": "Content", + "text": "<\"label\">" }, { "kind": "Content", @@ -3517,38 +2475,42 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryFormProps", + "name": "OryNodeLabelProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 2 + "endIndex": 8 } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryFormSocialButtons:function(1)", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryNodeOidcButtonProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryFormSocialButtons({ children, hideDivider, }: " + "text": "type OryNodeOidcButtonProps = " + }, + { + "kind": "Content", + "text": "{\n node: " }, { "kind": "Reference", - "text": "HeadlessSocialButtonsProps", - "canonicalReference": "@ory/elements-react!HeadlessSocialButtonsProps:type" + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" }, { "kind": "Content", - "text": "): " + "text": ";\n attributes: " }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "UiNodeInputAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeInputAttributes:interface" }, { "kind": "Content", - "text": " | null" + "text": ";\n onClick?: () => void;\n}" }, { "kind": "Content", @@ -3556,72 +2518,56 @@ } ], "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, hideDivider, }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "OryFormSocialButtons" + "name": "OryNodeOidcButtonProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 6 + } }, { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryFormSocialButtonsForm:function(1)", + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryNodeTextProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "declare function OryFormSocialButtonsForm(): " + "text": "type OryNodeTextProps = " + }, + { + "kind": "Content", + "text": "{\n attributes: " }, { "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" + "text": "UiNodeTextAttributes", + "canonicalReference": "@ory/client-fetch!UiNodeTextAttributes:interface" }, { "kind": "Content", - "text": " | null" + "text": ";\n node: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" }, { "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 1, - "endIndex": 3 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [], - "name": "OryFormSocialButtonsForm" - }, - { - "kind": "Namespace", - "canonicalReference": "@ory/elements-react!OryLocales:namespace", - "docComment": "", - "excerptTokens": [ + "text": ";\n}" + }, { "kind": "Content", - "text": "declare namespace locales " + "text": ";" } ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "OryLocales", - "preserveMemberOrder": false, - "members": [] + "name": "OryNodeTextProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 6 + } }, { "kind": "Function", @@ -3630,7 +2576,7 @@ "excerptTokens": [ { "kind": "Content", - "text": "declare function OryProvider" + "text": "" }, { "kind": "Content", @@ -3692,7 +2638,7 @@ ], "typeParameters": [ { - "typeParameterName": "T", + "typeParameterName": "Translation", "constraintTokenRange": { "startIndex": 1, "endIndex": 2 @@ -3705,43 +2651,14 @@ ], "name": "OryProvider" }, - { - "kind": "Function", - "canonicalReference": "@ory/elements-react!OryTwoStepCard:function(1)", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "declare function OryTwoStepCard(): " - }, - { - "kind": "Reference", - "text": "react_jsx_runtime.JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "returnTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [], - "name": "OryTwoStepCard" - }, { "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!ProviderProps:type", + "canonicalReference": "@ory/elements-react!OryProviderProps:type", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "type ProviderProps = " + "text": "type OryProviderProps = " }, { "kind": "Content", @@ -3758,8 +2675,8 @@ }, { "kind": "Reference", - "text": "IntlProviderProps", - "canonicalReference": "@ory/elements-react!IntlProviderProps:type" + "text": "OryIntlProviderProps", + "canonicalReference": "@ory/elements-react!OryIntlProviderProps:type" }, { "kind": "Content", @@ -3767,22 +2684,13 @@ }, { "kind": "Reference", - "text": "FlowContainer", - "canonicalReference": "@ory/elements-react!FlowContainer:type" + "text": "OryFlowContainer", + "canonicalReference": "@ory/elements-react!OryFlowContainer:type" }, { "kind": "Content", "text": " & " }, - { - "kind": "Reference", - "text": "ComponentPropsWithoutRef", - "canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type" - }, - { - "kind": "Content", - "text": "<\"div\"> & " - }, { "kind": "Reference", "text": "PropsWithChildren", @@ -3795,7 +2703,7 @@ ], "fileUrlPath": "dist/index.d.ts", "releaseTag": "Public", - "name": "ProviderProps", + "name": "OryProviderProps", "typeParameters": [ { "typeParameterName": "T", @@ -3811,13 +2719,42 @@ ], "typeTokenRange": { "startIndex": 1, - "endIndex": 11 + "endIndex": 9 } }, + { + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryTwoStepCard:function(1)", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "declare function OryTwoStepCard(): " + }, + { + "kind": "Reference", + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "OryTwoStepCard" + }, { "kind": "TypeAlias", "canonicalReference": "@ory/elements-react!RecoveryFlowContainer:type", - "docComment": "", + "docComment": "/**\n * A flow container for the recovery flow\n *\n * @see\n *\n * OryFlow\n *\n * @see\n *\n * RecoveryFlow\n */\n", "excerptTokens": [ { "kind": "Content", @@ -3825,8 +2762,8 @@ }, { "kind": "Reference", - "text": "BaseFlow", - "canonicalReference": "@ory/elements-react!~BaseFlow:type" + "text": "OryFlow", + "canonicalReference": "@ory/elements-react!~OryFlow:type" }, { "kind": "Content", @@ -3866,7 +2803,7 @@ { "kind": "TypeAlias", "canonicalReference": "@ory/elements-react!RegistrationFlowContainer:type", - "docComment": "", + "docComment": "/**\n * A flow container for the registration flow\n *\n * @see\n *\n * OryFlow\n *\n * @see\n *\n * RegistrationFlow\n */\n", "excerptTokens": [ { "kind": "Content", @@ -3874,8 +2811,8 @@ }, { "kind": "Reference", - "text": "BaseFlow", - "canonicalReference": "@ory/elements-react!~BaseFlow:type" + "text": "OryFlow", + "canonicalReference": "@ory/elements-react!~OryFlow:type" }, { "kind": "Content", @@ -3915,7 +2852,7 @@ { "kind": "TypeAlias", "canonicalReference": "@ory/elements-react!SettingsFlowContainer:type", - "docComment": "", + "docComment": "/**\n * A flow container for the settings flow\n *\n * @see\n *\n * OryFlow\n *\n * @see\n *\n * SettingsFlow\n */\n", "excerptTokens": [ { "kind": "Content", @@ -3923,8 +2860,8 @@ }, { "kind": "Reference", - "text": "BaseFlow", - "canonicalReference": "@ory/elements-react!~BaseFlow:type" + "text": "OryFlow", + "canonicalReference": "@ory/elements-react!~OryFlow:type" }, { "kind": "Content", @@ -3996,41 +2933,6 @@ "endIndex": 4 } }, - { - "kind": "TypeAlias", - "canonicalReference": "@ory/elements-react!TranslationFile:type", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "type TranslationFile = " - }, - { - "kind": "Content", - "text": "{\n [K in keyof typeof " - }, - { - "kind": "Reference", - "text": "en", - "canonicalReference": "@ory/elements-react!~en:var" - }, - { - "kind": "Content", - "text": "]: string;\n}" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "dist/index.d.ts", - "releaseTag": "Public", - "name": "TranslationFile", - "typeTokenRange": { - "startIndex": 1, - "endIndex": 4 - } - }, { "kind": "Function", "canonicalReference": "@ory/elements-react!uiTextToFormattedMessage:function(1)", @@ -4210,7 +3112,7 @@ { "kind": "TypeAlias", "canonicalReference": "@ory/elements-react!VerificationFlowContainer:type", - "docComment": "", + "docComment": "/**\n * A flow container for the verification flow\n *\n * @see\n *\n * OryFlow\n *\n * @see\n *\n * VerificationFlow\n */\n", "excerptTokens": [ { "kind": "Content", @@ -4218,8 +3120,8 @@ }, { "kind": "Reference", - "text": "BaseFlow", - "canonicalReference": "@ory/elements-react!~BaseFlow:type" + "text": "OryFlow", + "canonicalReference": "@ory/elements-react!~OryFlow:type" }, { "kind": "Content", diff --git a/packages/elements-react/api-report/elements-react.api.md b/packages/elements-react/api-report/elements-react.api.md index 8723aa8b0..3ca543877 100644 --- a/packages/elements-react/api-report/elements-react.api.md +++ b/packages/elements-react/api-report/elements-react.api.md @@ -18,7 +18,6 @@ import { LoginFlow } from '@ory/client-fetch'; import { MouseEventHandler } from 'react'; import { OnRedirectHandler } from '@ory/client-fetch'; import { PropsWithChildren } from 'react'; -import * as react from 'react'; import * as react_jsx_runtime from 'react/jsx-runtime'; import { RecoveryFlow } from '@ory/client-fetch'; import { RegistrationFlow } from '@ory/client-fetch'; @@ -37,211 +36,57 @@ import { UpdateSettingsFlowBody } from '@ory/client-fetch'; import { UpdateVerificationFlowBody } from '@ory/client-fetch'; import { VerificationFlow } from '@ory/client-fetch'; -// @public (undocumented) -export type CustomLanguageFormats = { - [k in (typeof LanguageCodes)[number]]?: Partial; -}; - -// @public (undocumented) -export type CustomTranslations = { - customTranslations: Partial; - locale: (typeof LanguageCodes)[number]; - defaultLocale: (typeof LanguageCodes)[number]; -}; - -// Warning: (ae-forgotten-export) The symbol "BaseFlow" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "OryFlow" needs to be exported by the entry point index.d.ts // -// @public (undocumented) -export type ErrorFlowContainer = BaseFlow; - -// @public (undocumented) -export type FlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer; +// @public +export type ErrorFlowContainer = OryFlow; -// @public (undocumented) -export type FlowContainerSetter = Dispatch>; +// @public +export type FlowContainerSetter = Dispatch>; -// @public (undocumented) -export type FlowContextValue = FlowContainer & { +// @public +export type FlowContextValue = OryFlowContainer & { setFlowContainer: FlowContainerSetter; }; -// @public (undocumented) -export function formatMessage(uiText: UiText | undefined, intl: IntlShape): string; - -// @public (undocumented) -export function formElementId(attributes: { - name: string; -}): { - id: string; -}; - -// @public (undocumented) -export function formLabelId(attributes: { - name: string; -}): { - htmlFor: string; -}; - -// @public (undocumented) +// @public export type FormValues = Record; -// @public (undocumented) -export type HeadlessAuthMethodListItemProps = { - onClick: () => void; - group: string; -}; - -// @public (undocumented) -export type HeadlessButtonProps = { - attributes: UiNodeInputAttributes; - node: UiNode; -} & Omit, "children">; - -// @public (undocumented) -export type HeadlessCurrentIdentifierProps = { - attributes: UiNodeInputAttributes; - node: UiNode; - onClick?: () => void; - href?: string; -} & Omit, "children" | "onClick">; - -// @public (undocumented) -export type HeadlessFormProps = ComponentPropsWithoutRef<"form"> & { - onSubmit: FormEventHandler; -}; - -// @public (undocumented) -export type HeadlessGroupContainerProps = PropsWithChildren; - -// @public (undocumented) -export type HeadlessGroupProps = PropsWithChildren<{ - groups: UiNodeGroupEnum[]; -}>; - -// @public (undocumented) -export type HeadlessImageProps = { - attributes: UiNodeImageAttributes; - node: UiNode; -}; - -// @public (undocumented) -export type HeadlessInputProps = { - attributes: UiNodeInputAttributes; - node: UiNode; - onClick?: MouseEventHandler; -}; - -// @public (undocumented) -export type HeadlessLabelProps = { - attributes: UiNodeInputAttributes; - node: UiNode; -} & ComponentPropsWithoutRef<"label">; - -// @public (undocumented) -export type HeadlessLinkButtonProps = { - attributes: UiNodeAnchorAttributes; - node: UiNode; -} & Omit, "children">; - -// @public (undocumented) -export function HeadlessMessage({ message }: HeadlessMessageProps): react_jsx_runtime.JSX.Element; - -// @public (undocumented) -export type HeadlessMessageProps = { - message: UiText; -}; - -// @public (undocumented) -export type HeadlessMessagesProps = DetailedHTMLProps, HTMLDivElement>; - -// @public (undocumented) -export type HeadlessSocialButtonContainerProps = PropsWithChildren<{ - nodes: UiNode[]; -}>; - -// @public (undocumented) -export type HeadlessSocialButtonProps = PropsWithChildren<{ - node: UiNode; - attributes: UiNodeInputAttributes; - onClick?: () => void; -}>; - -// @public (undocumented) -export type HeadlessSocialButtonsProps = PropsWithChildren<{ - hideDivider?: boolean; -}>; - -// @public (undocumented) -export type HeadlessTextProps = { - attributes: UiNodeTextAttributes; - node: UiNode; -}; - -// @public (undocumented) -export type HorizontalDividerProps = Record; - -// @public (undocumented) -export const IntlProvider: ({ children, ...props }: PropsWithChildren>) => string | number | boolean | Iterable | react_jsx_runtime.JSX.Element | null | undefined; - -// @public (undocumented) -export type IntlProviderProps = Type extends CustomTranslations ? CustomTranslations : SupportedTranslations; - -// @public (undocumented) -export const isCustomTranslations: (o: unknown) => o is CustomTranslations; - -// @public (undocumented) -export const LanguageCodes: readonly ["ab", "aa", "af", "sq", "am", "ar", "hy", "as", "ay", "az", "ba", "eu", "bn", "dz", "bh", "bi", "br", "bg", "my", "be", "km", "ca", "zh", "co", "hr", "cs", "da", "nl", "en", "eo", "et", "fo", "fj", "fi", "fr", "fy", "gd", "gl", "ka", "de", "el", "kl", "gn", "gu", "ha", "iw", "hi", "hu", "is", "in", "ia", "ie", "ik", "ga", "it", "ja", "jw", "kn", "ks", "kk", "rw", "ky", "rn", "ko", "ku", "lo", "la", "lv", "ln", "lt", "mk", "mg", "ms", "ml", "mt", "mi", "mr", "mo", "mn", "na", "ne", "no", "oc", "or", "om", "ps", "fa", "pl", "pt", "pa", "qu", "rm", "ro", "ru", "sm", "sg", "sa", "sr", "sh", "st", "tn", "sn", "sd", "si", "ss", "sk", "sl", "so", "es", "su", "sw", "sv", "tl", "tg", "ta", "tt", "te", "th", "bo", "ti", "to", "ts", "tr", "tk", "tw", "uk", "ur", "uz", "vi", "vo", "cy", "wo", "xh", "ji", "yo", "zu"]; - // @public (undocumented) export type Locale = keyof typeof OryLocales; -// @public (undocumented) -export type LoginFlowContainer = BaseFlow; +// @public +export type LoginFlowContainer = OryFlow; -// @public (undocumented) +// @public export function messageTestId(message: UiText): { "data-testid": string; }; -// @public (undocumented) +// @public export type OnSubmitHandlerProps = { - setFlowContainer: (flowContainer: FlowContainer) => void; + setFlowContainer: (flowContainer: OryFlowContainer) => void; body: T; onRedirect: OnRedirectHandler; }; // @public -export function onSubmitLogin({ config, flow }: FlowContainer, { setFlowContainer, body, onRedirect, }: OnSubmitHandlerProps): Promise; - -// @public -export function onSubmitRecovery({ config, flow }: FlowContainer, { setFlowContainer, body, onRedirect, }: OnSubmitHandlerProps): Promise; +export function OryCard({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element; // @public -export function onSubmitRegistration({ config, flow }: FlowContainer, { setFlowContainer, body, onRedirect, }: OnSubmitHandlerProps): Promise; +export type OryCardAuthMethodListItemProps = { + onClick: () => void; + group: string; +}; // @public -export function onSubmitSettings({ config, flow }: FlowContainer, { setFlowContainer, body, onRedirect, }: OnSubmitHandlerProps): Promise; +export function OryCardContent({ children }: OryCardContentProps): react_jsx_runtime.JSX.Element; // @public -export function onSubmitVerification({ config, flow }: FlowContainer, { setFlowContainer, body, onRedirect, }: OnSubmitHandlerProps): Promise; - -// @public (undocumented) -export function OryCard({ children }: OryCardProps): react_jsx_runtime.JSX.Element; +export type OryCardContentProps = PropsWithChildren; // @public -export type OryCardComponents = { - Card: ComponentType; - CardFooter: ComponentType; - CardHeader: ComponentType; - CardContent: ComponentType; - CardLogo: ComponentType; -}; - -// @public (undocumented) -export function OryCardContent({ children }: OryCardContentProps): react_jsx_runtime.JSX.Element; - -// @public (undocumented) -export type OryCardContentProps = PropsWithChildren; +export type OryCardDividerProps = Record; // @public (undocumented) export function OryCardFooter(): react_jsx_runtime.JSX.Element; @@ -255,11 +100,14 @@ export function OryCardHeader(): react_jsx_runtime.JSX.Element; // @public (undocumented) export type OryCardHeaderProps = Record; +// @public (undocumented) +export type OryCardLogoProps = Record; + // @public (undocumented) export type OryCardProps = PropsWithChildren; // @public (undocumented) -export function OryCardValidationMessages({ ...props }: HeadlessMessagesProps): react_jsx_runtime.JSX.Element | null; +export function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null; // @public (undocumented) export type OryClientConfiguration = { @@ -282,93 +130,183 @@ export type OryClientConfiguration = { }; }; -// Warning: (ae-forgotten-export) The symbol "ComponentProviderProps" needs to be exported by the entry point index.d.ts +// @public (undocumented) +export type OryCurrentIdentifierProps = { + attributes: UiNodeInputAttributes; + node: UiNode; + onClick?: () => void; + href?: string; +} & Omit, "children" | "onClick">; + +// Warning: (ae-forgotten-export) The symbol "DeepPartialTwoLevels" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function OryComponentProvider({ children, components, nodeSorter, }: PropsWithChildren): react_jsx_runtime.JSX.Element; +export type OryFlowComponentOverrides = DeepPartialTwoLevels; + +// @public +export type OryFlowComponents = { + Node: { + Button: ComponentType; + OidcButton: ComponentType; + CurrentIdentifierButton: ComponentType; + Anchor: ComponentType; + Input: ComponentType; + CodeInput: ComponentType; + Image: ComponentType; + Label: ComponentType; + Checkbox: ComponentType; + Text: ComponentType; + }; + Card: { + Root: ComponentType; + Footer: ComponentType; + Header: ComponentType; + Content: ComponentType; + Logo: ComponentType; + Divider: ComponentType; + AuthMethodListItem: ComponentType; + }; + Form: { + Root: ComponentType; + OidcRoot: ComponentType; + Group: ComponentType; + }; + Message: { + Root: ComponentType; + Content: ComponentType; + }; +}; + +// @public +export type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer; // @public (undocumented) -export type OryFlowComponents = OryFormComponents & OryCardComponents; +export function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element; + +// @public +export function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null; // @public (undocumented) -export function OryFlowProvider({ children, ...container }: OryFlowProviderProps): react_jsx_runtime.JSX.Element; +export type OryFormGroupProps = PropsWithChildren; // @public (undocumented) -export type OryFlowProviderProps = PropsWithChildren; +export function OryFormGroups({ children, groups }: OryFormGroupsProps): react_jsx_runtime.JSX.Element; // @public (undocumented) -export function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element; +export type OryFormGroupsProps = PropsWithChildren<{ + groups: UiNodeGroupEnum[]; +}>; // @public (undocumented) -export type OryFormComponents = { - Button: ComponentType; - LinkButton: ComponentType; - Input: ComponentType; - PinCodeInput: ComponentType; - Image: ComponentType; - Label: ComponentType; - Checkbox: ComponentType; - Text: ComponentType; - FormContainer: ComponentType; - SocialButton: ComponentType; - SocialButtonContainer: ComponentType; - AuthMethodListItem: ComponentType; - HorizontalDivider: ComponentType; - FormGroup: ComponentType; - MessageContainer: ComponentType; - Message: ComponentType; - CurrentIdentifierButton: ComponentType; -}; +export function OryFormOidcButtons({ children, hideDivider, }: OryFormOidcButtonsProps): react_jsx_runtime.JSX.Element | null; // @public (undocumented) -export function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null; +export type OryFormOidcButtonsProps = PropsWithChildren<{ + hideDivider?: boolean; +}>; // @public (undocumented) -export function OryFormGroups({ children, groups }: HeadlessGroupProps): react_jsx_runtime.JSX.Element; +export type OryFormOidcRootProps = PropsWithChildren<{ + nodes: UiNode[]; +}>; // @public (undocumented) export type OryFormProps = PropsWithChildren; // @public (undocumented) -export function OryFormSocialButtons({ children, hideDivider, }: HeadlessSocialButtonsProps): react_jsx_runtime.JSX.Element | null; +export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & { + onSubmit: FormEventHandler; +}; // @public (undocumented) export function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null; +// Warning: (ae-forgotten-export) The symbol "CustomTranslations" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export type OryIntlProviderProps = Translation extends CustomTranslations ? CustomTranslations : SupportedTranslations; + // @public (undocumented) export namespace OryLocales { { locales_de as de, locales_en as en, locales_es as es, locales_fr as fr, locales_nl as nl, locales_pl as pl, locales_pt as pt, locales_sv as sv }; } // @public (undocumented) -export function OryProvider({ children, components: Components, ...props }: ProviderProps): react_jsx_runtime.JSX.Element; +export type OryMessageContentProps = { + message: UiText; +}; // @public (undocumented) -export function OryTwoStepCard(): react_jsx_runtime.JSX.Element; +export type OryMessageRootProps = DetailedHTMLProps, HTMLDivElement>; // @public (undocumented) -export type ProviderProps = { - components: OryFlowComponents; -} & IntlProviderProps & FlowContainer & ComponentPropsWithoutRef<"div"> & PropsWithChildren; +export type OryNodeAnchorProps = { + attributes: UiNodeAnchorAttributes; + node: UiNode; +} & Omit, "children">; + +// @public (undocumented) +export type OryNodeButtonProps = { + attributes: UiNodeInputAttributes; + node: UiNode; +} & Omit, "children">; // @public (undocumented) -export type RecoveryFlowContainer = BaseFlow; +export type OryNodeImageProps = { + attributes: UiNodeImageAttributes; + node: UiNode; +}; // @public (undocumented) -export type RegistrationFlowContainer = BaseFlow; +export type OryNodeInputProps = { + attributes: UiNodeInputAttributes; + node: UiNode; + onClick?: MouseEventHandler; +}; // @public (undocumented) -export type SettingsFlowContainer = BaseFlow; +export type OryNodeLabelProps = { + attributes: UiNodeInputAttributes; + node: UiNode; +} & ComponentPropsWithoutRef<"label">; // @public (undocumented) -export type SupportedTranslations = { - locale?: Locale; - defaultLocale?: string; +export type OryNodeOidcButtonProps = { + node: UiNode; + attributes: UiNodeInputAttributes; + onClick?: () => void; }; // @public (undocumented) -export type TranslationFile = { - [K in keyof typeof en]: string; +export type OryNodeTextProps = { + attributes: UiNodeTextAttributes; + node: UiNode; +}; + +// @public (undocumented) +export function OryProvider({ children, components: Components, ...props }: OryProviderProps): react_jsx_runtime.JSX.Element; + +// @public (undocumented) +export type OryProviderProps = { + components: OryFlowComponents; +} & OryIntlProviderProps & OryFlowContainer & PropsWithChildren; + +// @public (undocumented) +export function OryTwoStepCard(): react_jsx_runtime.JSX.Element; + +// @public +export type RecoveryFlowContainer = OryFlow; + +// @public +export type RegistrationFlowContainer = OryFlow; + +// @public +export type SettingsFlowContainer = OryFlow; + +// @public (undocumented) +export type SupportedTranslations = { + locale?: Locale; + defaultLocale?: string; }; // @public @@ -385,8 +323,8 @@ export function useNodeSorter(): (a: UiNode, b: UiNode, ctx: { // @public export function useOryFlow(): FlowContextValue; -// @public (undocumented) -export type VerificationFlowContainer = BaseFlow; +// @public +export type VerificationFlowContainer = OryFlow; // (No @packageDocumentation comment for this package) diff --git a/packages/elements-react/package.json b/packages/elements-react/package.json index 96fbd84c0..7dac6e98c 100644 --- a/packages/elements-react/package.json +++ b/packages/elements-react/package.json @@ -31,6 +31,7 @@ "@ory/client-fetch": "^1.15.4", "clsx": "2.1.1", "input-otp": "1.2.4", + "lodash.merge": "4.6.2", "react-hook-form": "7.53.0", "react-intl": "6.7.0", "tailwind-merge": "2.5.2" @@ -42,6 +43,7 @@ "devDependencies": { "@hookform/devtools": "^4.3.1", "@svgr/plugin-svgo": "^8.1.0", + "@types/lodash.merge": "4.6.9", "esbuild-plugin-svgr": "^2.1.0", "eslint-plugin-react": "7.37.0", "postcss": "8.4.47", diff --git a/packages/elements-react/src/components/card/card-two-step.tsx b/packages/elements-react/src/components/card/card-two-step.tsx index 5c0eba8ec..9dba5661f 100644 --- a/packages/elements-react/src/components/card/card-two-step.tsx +++ b/packages/elements-react/src/components/card/card-two-step.tsx @@ -39,8 +39,7 @@ export function OryTwoStepCard() { const [selectedGroup, setSelectedGroup] = useState< UiNodeGroupEnum | undefined >() - const Components = useComponents() - const { FormGroup } = useComponents() + const { Form, Card } = useComponents() const { flowType } = useOryFlow() const nodeSorter = useNodeSorter() @@ -62,7 +61,7 @@ export function OryTwoStepCard() { ).includes(group), ) - const hasOIDC = Boolean(uniqueGroups.oidc?.length) + const hasOidc = Boolean(uniqueGroups.oidc?.length) const zeroStepGroups = filterZeroStepGroups(ui.nodes) const finalNodes = getFinalNodes(uniqueGroups, selectedGroup) @@ -78,11 +77,11 @@ export function OryTwoStepCard() { - {step === ProcessStep.ProvideIdentifier && hasOIDC && ( + {step === ProcessStep.ProvideIdentifier && hasOidc && ( )} - + {step === ProcessStep.ProvideIdentifier && zeroStepGroups .sort(sortNodes) @@ -93,7 +92,7 @@ export function OryTwoStepCard() { )} {options.map((option) => ( - setSelectedGroup(option)} @@ -109,7 +108,7 @@ export function OryTwoStepCard() { ))} )} - + @@ -126,7 +125,7 @@ const BackButton = ({ onClick, href }: BackButtonProps) => { const { flow: { ui }, } = useOryFlow() - const Components = useComponents() + const { Node } = useComponents() const nodeBackButton = ui.nodes.find( (node) => @@ -142,7 +141,7 @@ const BackButton = ({ onClick, href }: BackButtonProps) => { } return ( - {children} + } + + return ( + + + + + + ) +} diff --git a/packages/elements-react/src/components/card/content.tsx b/packages/elements-react/src/components/card/content.tsx new file mode 100644 index 000000000..fbe667eae --- /dev/null +++ b/packages/elements-react/src/components/card/content.tsx @@ -0,0 +1,56 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { PropsWithChildren } from "react" +import { useComponents } from "../../context" +import { + OryCardValidationMessages, + OryForm, + OryFormGroups, + OryFormOidcButtons, +} from "../form" + +/** + * Props for the OryCardContent component. + */ +export type OryCardContentProps = PropsWithChildren + +/** + * A component that renders the content of the Ory Card. + * This is the main content of the card, such as the flow's form, with it's input fields and messages. + * + * You can use this component to build fully custom implementations of the Ory Flows. + * + * However, you most likely want to override the individual components instead. + * + * @param props - pass children to render instead of the default Ory Card components + * @returns + */ +export function OryCardContent({ children }: OryCardContentProps) { + const { Card } = useComponents() + + if (children) { + return {children} + } + + return ( + + + + + + + + ) +} diff --git a/packages/elements-react/src/components/card/footer.tsx b/packages/elements-react/src/components/card/footer.tsx new file mode 100644 index 000000000..606023110 --- /dev/null +++ b/packages/elements-react/src/components/card/footer.tsx @@ -0,0 +1,11 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { useComponents } from "../../context" + +export type OryCardFooterProps = Record + +export function OryCardFooter() { + const { Card } = useComponents() + return +} diff --git a/packages/elements-react/src/components/card/header.tsx b/packages/elements-react/src/components/card/header.tsx index 7c7f11470..aca02fa1c 100644 --- a/packages/elements-react/src/components/card/header.tsx +++ b/packages/elements-react/src/components/card/header.tsx @@ -6,6 +6,6 @@ import { useComponents } from "../../context" export type OryCardHeaderProps = Record export function OryCardHeader() { - const { CardHeader } = useComponents() - return + const { Card } = useComponents() + return } diff --git a/packages/elements-react/src/components/card/index.tsx b/packages/elements-react/src/components/card/index.tsx index c02f9dcdc..ead1ae89c 100644 --- a/packages/elements-react/src/components/card/index.tsx +++ b/packages/elements-react/src/components/card/index.tsx @@ -1,99 +1,17 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { ComponentType, PropsWithChildren } from "react" -import { useComponents } from "../../context" -import { OryForm } from "../form/form" -import { OryFormGroups } from "../form/groups" -import { OryCardValidationMessages } from "../form/messages" -import { OryTwoStepCard } from "./card-two-step" import { OryCardHeader, OryCardHeaderProps } from "./header" +import { OryCard, OryCardRootProps } from "./card" +import { OryCardFooter, OryCardFooterProps } from "./footer" +import { OryCardContent, OryCardContentProps } from "./content" +import { OryTwoStepCard } from "./card-two-step" -export type OryCardContentProps = PropsWithChildren - -export function OryCardContent({ children }: OryCardContentProps) { - const { CardContent } = useComponents() - - if (children) { - return {children} - } - - return ( - - - - - - - ) -} - -export type OryCardFooterProps = Record - -export function OryCardFooter() { - const { CardFooter } = useComponents() - return -} - -export type OryCardProps = PropsWithChildren - -export function OryCard({ children }: OryCardProps) { - const { Card } = useComponents() - - if (children) { - return {children} - } - - return ( - - - - - - ) -} - -/** - * Card components are used to show login, registration, recovery, and verification flows. - */ -export type OryCardComponents = { - /** - * The card container is the main container of the card. - */ - Card: ComponentType - - /** - * The card footer is the footer of the card container. - */ - CardFooter: ComponentType - - /** - * The card header is the header of the card container. - */ - CardHeader: ComponentType - - /** - * The card content is the main content of the card container. - */ - CardContent: ComponentType +export { OryCardHeader, OryCard, OryCardFooter, OryCardContent, OryTwoStepCard } - /** - * The card logo is the logo of the card container. - */ - CardLogo: ComponentType +export type { + OryCardHeaderProps, + OryCardRootProps as OryCardProps, + OryCardFooterProps, + OryCardContentProps, } - -export { OryCardHeader, OryTwoStepCard } - -export type { OryCardHeaderProps } diff --git a/packages/elements-react/src/components/form/form-helpers.ts b/packages/elements-react/src/components/form/form-helpers.ts index 4f2ce0b53..388c0e960 100644 --- a/packages/elements-react/src/components/form/form-helpers.ts +++ b/packages/elements-react/src/components/form/form-helpers.ts @@ -3,9 +3,11 @@ import { isUiNodeInputAttributes } from "@ory/client-fetch" import { FormValues } from "../../types" -import { FlowContainer } from "../../util" +import { OryFlowContainer } from "../../util" -export function computeDefaultValues(flowContainer: FlowContainer): FormValues { +export function computeDefaultValues( + flowContainer: OryFlowContainer, +): FormValues { return flowContainer.flow.ui.nodes.reduce((acc, node) => { if (isUiNodeInputAttributes(node.attributes)) { if (node.attributes.name === "method") { diff --git a/packages/elements-react/src/components/form/form.tsx b/packages/elements-react/src/components/form/form.tsx index f770e548f..faba36ca7 100644 --- a/packages/elements-react/src/components/form/form.tsx +++ b/packages/elements-react/src/components/form/form.tsx @@ -14,23 +14,24 @@ import { useIntl } from "react-intl" import { useOryFlow, useComponents } from "../../context" import { FormValues, - HeadlessAuthMethodListItemProps, - HeadlessButtonProps, - HeadlessCurrentIdentifierProps, - HeadlessFormProps, - HeadlessImageProps, - HeadlessInputProps, - HeadlessLabelProps, - HeadlessLinkButtonProps, - HeadlessTextProps, + OryCardAuthMethodListItemProps, + OryNodeButtonProps, + OryFormRootProps, + OryNodeImageProps, + OryNodeInputProps, + OryNodeLabelProps, + OryNodeAnchorProps, + OryNodeTextProps, + OryCurrentIdentifierProps, + OryCardLogoProps, } from "../../types" -import { HorizontalDividerProps } from "../generic/divider" -import { HeadlessGroupContainerProps, OryFormGroups } from "./groups" -import { HeadlessMessageProps, HeadlessMessagesProps } from "./messages" +import { OryCardDividerProps } from "../generic/divider" +import { OryFormGroupProps, OryFormGroups } from "./groups" +import { OryMessageContentProps, OryMessageRootProps } from "./messages" import { - HeadlessSocialButtonContainerProps, - HeadlessSocialButtonProps, - OryFormSocialButtons, + OryFormOidcRootProps, + OryNodeOidcButtonProps, + OryFormOidcButtons, } from "./social" import { FlowType, @@ -40,46 +41,147 @@ import { isUiNodeInputAttributes, isUiNodeScriptAttributes, } from "@ory/client-fetch" -import { - FlowContainer, - onSubmitLogin, - onSubmitRecovery, - onSubmitRegistration, - onSubmitSettings, - onSubmitVerification, -} from "../../util" +import { OryFlowContainer } from "../../util" import { computeDefaultValues } from "./form-helpers" +import { OryCardRootProps } from "../card/card" +import { OryCardFooterProps } from "../card" +import { OryCardContentProps } from "../card/content" +import { onSubmitLogin } from "../../util/onSubmitLogin" +import { onSubmitRegistration } from "../../util/onSubmitRegistration" +import { onSubmitVerification } from "../../util/onSubmitVerification" +import { onSubmitRecovery } from "../../util/onSubmitRecovery" +import { onSubmitSettings } from "../../util/onSubmitSettings" -export type OryFormComponents = { - Button: ComponentType - LinkButton: ComponentType - Input: ComponentType - PinCodeInput: ComponentType - Image: ComponentType - Label: ComponentType - Checkbox: ComponentType - Text: ComponentType - - FormContainer: ComponentType - - SocialButton: ComponentType - SocialButtonContainer: ComponentType - - AuthMethodListItem: ComponentType +/** + * A record of all the components that are used in the OryForm component. + */ +export type OryFlowComponents = { + Node: { + /** + * Button component, rendered whenever a button is encountered in the Ory UI Nodes. + */ + Button: ComponentType + /** + * The SocialButton component is rendered whenever a button of group "oidc" node is encountered. + * + * It renders the "Login with Google", "Login with Facebook" etc. buttons. + */ + OidcButton: ComponentType + /** + * The CurrentIdentifierButton component is rendered whenever a button of group "identifier_first" node is encountered. + * + * It is used to show the current identifier and can allow the user to start a new flow, if they want to. + */ + CurrentIdentifierButton: ComponentType + /** + * Anchor component, rendered whenever an "anchor" node is encountered + */ + Anchor: ComponentType + /** + * The Input component is rendered whenever a "input" node is encountered. + */ + Input: ComponentType + /** + * Special version of the Input component for OTP codes. + */ + CodeInput: ComponentType + /** + * The Image component is rendered whenever an "image" node is encountered. + * + * For example used in the "Logo" node. + */ + Image: ComponentType + /** + * The Label component is rendered around Input components and is used to render form labels. + */ + Label: ComponentType + /** + * The Checkbox component is rendered whenever an input node with of boolean type is encountered. + */ + Checkbox: ComponentType + /** + * The Text component is rendered whenever a "text" node is encountered. + */ + Text: ComponentType + } + Card: { + /** + * The card container is the main container of the card. + */ + Root: ComponentType + /** + * The card footer is the footer of the card container. + */ + Footer: ComponentType + /** + * The card header is the header of the card container. + */ + Header: ComponentType + /** + * The card content is the main content of the card container. + */ + Content: ComponentType + /** + * The card logo is the logo of the card container. + */ + Logo: ComponentType + /** + * The HorizontalDivider component is rendered between groups. + */ + Divider: ComponentType + /** + * The AuthMethodListItem component is rendered on the "method" chooser step in the identifier_first login flow. + * + * This is only used, if login is configured to use identifier_first authentication. + */ + AuthMethodListItem: ComponentType + } + Form: { + /** + * The FormContainer component is the main container of the form. + * + * It should render its children. + * + * You most likely don't want to override this component directly. + */ + Root: ComponentType + /** + * A special form group container for the social buttons. + * + * This is required, because the social buttons need to be in its form, to not influence the other form groups. + * + * You most likely don't want to override this component directly. + */ + OidcRoot: ComponentType - HorizontalDivider: ComponentType + /** + * The FormGroup is rendered around each group of nodes in the UI nodes. + */ + Group: ComponentType + } + Message: { + /** + * The MessageContainer is rendered around the messages. + */ + Root: ComponentType - FormGroup: ComponentType + /** + * The Message component is rendered whenever a message is encountered. + */ + Content: ComponentType + } +} - MessageContainer: ComponentType - Message: ComponentType - CurrentIdentifierButton: ComponentType +type DeepPartialTwoLevels = { + [P in keyof T]?: T[P] extends object ? { [K in keyof T[P]]?: T[P][K] } : T[P] } +export type OryFlowComponentOverrides = DeepPartialTwoLevels + export type OryFormProps = PropsWithChildren export function OryForm({ children }: OryFormProps) { - const { FormContainer } = useComponents() + const { Form } = useComponents() const flowContainer = useOryFlow() const methods = useForm({ // TODO: Generify this, so we have typesafety in the submit handler. @@ -98,7 +200,7 @@ export function OryForm({ children }: OryFormProps) { window.location.href = url } - const handleSuccess = (flow: FlowContainer) => { + const handleSuccess = (flow: OryFlowContainer) => { flowContainer.setFlowContainer(flow) methods.reset(computeDefaultValues(flow)) } @@ -194,14 +296,14 @@ export function OryForm({ children }: OryFormProps) { return ( - void methods.handleSubmit(onSubmit)(e)} > {children ?? ( <> - + )} - + ) } diff --git a/packages/elements-react/src/components/form/groups.tsx b/packages/elements-react/src/components/form/groups.tsx index b4da0be66..af4fe8473 100644 --- a/packages/elements-react/src/components/form/groups.tsx +++ b/packages/elements-react/src/components/form/groups.tsx @@ -7,29 +7,29 @@ import { UiNodeGroupEnum } from "@ory/client-fetch" import { PropsWithChildren } from "react" import { Node } from "./nodes/node" -export type HeadlessGroupProps = PropsWithChildren<{ +export type OryFormGroupsProps = PropsWithChildren<{ groups: UiNodeGroupEnum[] }> -export type HeadlessGroupContainerProps = PropsWithChildren +export type OryFormGroupProps = PropsWithChildren -export function OryFormGroups({ children, groups }: HeadlessGroupProps) { +export function OryFormGroups({ children, groups }: OryFormGroupsProps) { const { flow: { ui }, } = useOryFlow() const nodeSorter = useNodeSorter() const { flowType } = useOryFlow() - const { FormGroup } = useComponents() + const { Form } = useComponents() const nodes = ui.nodes .filter((node) => groups.indexOf(node.group) > -1) .sort((a, b) => nodeSorter(a, b, { flowType })) return ( - + {children ?? nodes.map((node, k) => { return })} - + ) } diff --git a/packages/elements-react/src/components/form/messages.tsx b/packages/elements-react/src/components/form/messages.tsx index 339875829..7d16ce3ee 100644 --- a/packages/elements-react/src/components/form/messages.tsx +++ b/packages/elements-react/src/components/form/messages.tsx @@ -5,34 +5,29 @@ import { useOryFlow, useComponents } from "../../context" import { UiText } from "@ory/client-fetch" import { DetailedHTMLProps, HTMLAttributes } from "react" -export type HeadlessMessagesProps = DetailedHTMLProps< +export type OryMessageContentProps = { + message: UiText +} + +export type OryMessageRootProps = DetailedHTMLProps< HTMLAttributes, HTMLDivElement > -export function OryCardValidationMessages({ ...props }: HeadlessMessagesProps) { +export function OryCardValidationMessages({ ...props }: OryMessageRootProps) { const { flow } = useOryFlow() const messages = flow.ui.messages - const { MessageContainer } = useComponents() + const { Message } = useComponents() if (!messages) { return null } return ( - + {messages?.map((message) => ( - + ))} - + ) } - -export type HeadlessMessageProps = { - message: UiText -} - -export function HeadlessMessage({ message }: HeadlessMessageProps) { - const { Message } = useComponents() - return -} diff --git a/packages/elements-react/src/components/form/nodes/input.tsx b/packages/elements-react/src/components/form/nodes/input.tsx index 06df5ff9d..8c913390c 100644 --- a/packages/elements-react/src/components/form/nodes/input.tsx +++ b/packages/elements-react/src/components/form/nodes/input.tsx @@ -17,7 +17,7 @@ export const NodeInput = ({ attributes: UiNodeInputAttributes onClick?: MouseEventHandler }): ReactNode => { - const Components = useComponents() + const { Node } = useComponents() const nodeType = attributes.type const { onloadTrigger: onloadTrigger, @@ -60,58 +60,40 @@ export const NodeInput = ({ case UiNodeInputAttributesTypeEnum.Submit: case UiNodeInputAttributesTypeEnum.Button: if (isSocial) { - return + return } if (isResend) { return null } return ( - + ) case UiNodeInputAttributesTypeEnum.DatetimeLocal: throw new Error("Not implemented") case UiNodeInputAttributesTypeEnum.Checkbox: return ( - + ) case UiNodeInputAttributesTypeEnum.Hidden: - return ( - - ) + return default: if (isPinCodeInput) { return ( - - + - + ) } return ( - - - + + + ) } } diff --git a/packages/elements-react/src/components/form/nodes/node.tsx b/packages/elements-react/src/components/form/nodes/node.tsx index c8dc17f70..036a33941 100644 --- a/packages/elements-react/src/components/form/nodes/node.tsx +++ b/packages/elements-react/src/components/form/nodes/node.tsx @@ -20,19 +20,19 @@ export type NodeProps = { } export const Node = ({ node, onClick }: NodeProps): ReactNode => { - const Components = useComponents() + const { Node } = useComponents() if (isUiNodeImageAttributes(node.attributes)) { - return + return } else if (isUiNodeTextAttributes(node.attributes)) { const attrs = node.attributes - return + return } else if (isUiNodeInputAttributes(node.attributes)) { return ( ) } else if (isUiNodeAnchorAttributes(node.attributes)) { - return + return } else if (isUiNodeScriptAttributes(node.attributes)) { const { crossorigin, diff --git a/packages/elements-react/src/components/form/social.tsx b/packages/elements-react/src/components/form/social.tsx index 064dde4bb..1313f2fff 100644 --- a/packages/elements-react/src/components/form/social.tsx +++ b/packages/elements-react/src/components/form/social.tsx @@ -8,24 +8,24 @@ import { PropsWithChildren } from "react" import { OryForm } from "./form" import { useFormContext } from "react-hook-form" -export type HeadlessSocialButtonsProps = PropsWithChildren<{ +export type OryFormOidcButtonsProps = PropsWithChildren<{ hideDivider?: boolean }> -export type HeadlessSocialButtonContainerProps = PropsWithChildren<{ +export type OryFormOidcRootProps = PropsWithChildren<{ nodes: UiNode[] }> -export type HeadlessSocialButtonProps = PropsWithChildren<{ +export type OryNodeOidcButtonProps = { node: UiNode attributes: UiNodeInputAttributes onClick?: () => void -}> +} -export function OryFormSocialButtons({ +export function OryFormOidcButtons({ children, hideDivider, -}: HeadlessSocialButtonsProps) { +}: OryFormOidcButtonsProps) { const { flow: { ui }, } = useOryFlow() @@ -34,8 +34,7 @@ export function OryFormSocialButtons({ // Only get the oidc nodes. const filteredNodes = ui.nodes.filter((node) => node.group === "oidc") - const { SocialButtonContainer, HorizontalDivider, SocialButton } = - useComponents() + const { Form, Card, Node } = useComponents() if (filteredNodes.length === 0) { return null @@ -48,11 +47,11 @@ export function OryFormSocialButtons({ return ( <> - + {children ?? filteredNodes.map((node, k) => { return ( - ) })} - + {!hideDivider && filteredNodes.length > 0 && otherNodes.length > 0 && ( - + )} ) @@ -88,7 +87,7 @@ export function OryFormSocialButtonsForm() { return ( - + ) } diff --git a/packages/elements-react/src/components/generic/divider.tsx b/packages/elements-react/src/components/generic/divider.tsx index e2ae72a14..1cfad63ac 100644 --- a/packages/elements-react/src/components/generic/divider.tsx +++ b/packages/elements-react/src/components/generic/divider.tsx @@ -4,10 +4,22 @@ import { useComponents } from "../../context" import { useOryFlow } from "../../context" -export type HorizontalDividerProps = Record +/** + * Props type for the Form Group Divider component. + */ +export type OryCardDividerProps = Record +/** + * Renders the @see Card.Divider between the groups of nodes in the Ory Form. + * + * You can use this component to build fully custom implementations of the Ory Flows. + * + * However, you most likely want to override the individual components instead. + * + * @returns + */ export function OryFormGroupDivider() { - const { HorizontalDivider } = useComponents() + const { Card } = useComponents() const { flow: { ui }, } = useOryFlow() @@ -21,7 +33,7 @@ export function OryFormGroupDivider() { ) if (filteredNodes.length > 0 && otherNodes.length > 0) { - return + return } return null } diff --git a/packages/elements-react/src/context/component.tsx b/packages/elements-react/src/context/component.tsx index 5f2c1322a..0a2a0fd43 100644 --- a/packages/elements-react/src/context/component.tsx +++ b/packages/elements-react/src/context/component.tsx @@ -3,7 +3,7 @@ import { UiNode } from "@ory/client-fetch" import { PropsWithChildren, createContext, useContext } from "react" -import { OryFlowComponents } from "../types" +import { OryFlowComponents } from "../components" type ComponentContextValue = { components: OryFlowComponents diff --git a/packages/elements-react/src/context/flow-context.tsx b/packages/elements-react/src/context/flow-context.tsx index ef424b898..506d5d3a4 100644 --- a/packages/elements-react/src/context/flow-context.tsx +++ b/packages/elements-react/src/context/flow-context.tsx @@ -8,7 +8,7 @@ import { useContext, useState, } from "react" -import { FlowContainer } from "../util/flowContainer" +import { OryFlowContainer } from "../util/flowContainer" /** * Returns an object that contains the current flow and the flow type, as well as the configuration. @@ -24,16 +24,25 @@ export function useOryFlow() { return ctx } -export type FlowContainerSetter = Dispatch> +/** + * Function to set the flow container. + */ +export type FlowContainerSetter = Dispatch> -export type FlowContextValue = FlowContainer & { +/** + * The return value of the OryFlowContext. + */ +export type FlowContextValue = OryFlowContainer & { + /** + * Function to set the flow container. + */ setFlowContainer: FlowContainerSetter } // This is fine, because we don't export the context itself and guard from it being null in useOryFlow const OryFlowContext = createContext(null!) -export type OryFlowProviderProps = PropsWithChildren +export type OryFlowProviderProps = PropsWithChildren export function OryFlowProvider({ children, @@ -52,7 +61,7 @@ export function OryFlowProvider({ ({ ...container, ...updatedContainer, - }) as FlowContainer, + }) as OryFlowContainer, ) }, } as FlowContextValue diff --git a/packages/elements-react/src/context/index.tsx b/packages/elements-react/src/context/index.tsx index 518f133d3..317e1d376 100644 --- a/packages/elements-react/src/context/index.tsx +++ b/packages/elements-react/src/context/index.tsx @@ -1,7 +1,15 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -export * from "./component" -export * from "./flow-context" -export * from "./intl-context" +export { useComponents, useNodeSorter } from "./component" +export { + useOryFlow, + type FlowContextValue, + type FlowContainerSetter, +} from "./flow-context" +export type { + SupportedTranslations, + OryIntlProviderProps, + Locale, +} from "./intl-context" export * from "./provider" diff --git a/packages/elements-react/src/context/intl-context.tsx b/packages/elements-react/src/context/intl-context.tsx index 6384968a0..dd5cc5115 100644 --- a/packages/elements-react/src/context/intl-context.tsx +++ b/packages/elements-react/src/context/intl-context.tsx @@ -150,6 +150,9 @@ export const LanguageCodes = [ "zu", ] as const +/** + * A record of custom translations for a specific locale. + */ export type CustomLanguageFormats = { [k in (typeof LanguageCodes)[number]]?: Partial } @@ -176,16 +179,19 @@ export type SupportedTranslations = { defaultLocale?: string } -export type IntlProviderProps = Type extends CustomTranslations - ? CustomTranslations - : SupportedTranslations +export type OryIntlProviderProps = + Translation extends CustomTranslations + ? CustomTranslations + : SupportedTranslations export const IntlProvider = < - T extends SupportedTranslations | CustomTranslations = SupportedTranslations, + Translation extends + | SupportedTranslations + | CustomTranslations = SupportedTranslations, >({ children, ...props -}: PropsWithChildren>) => { +}: PropsWithChildren>) => { const intlCtx = useContext(IntlContext) if (intlCtx) { diff --git a/packages/elements-react/src/context/provider.tsx b/packages/elements-react/src/context/provider.tsx index 37ae198cf..47eeb7dc3 100644 --- a/packages/elements-react/src/context/provider.tsx +++ b/packages/elements-react/src/context/provider.tsx @@ -2,29 +2,29 @@ // SPDX-License-Identifier: Apache-2.0 "use client" -import { ComponentPropsWithoutRef, PropsWithChildren } from "react" -import { OryFlowComponents } from "../types" +import { PropsWithChildren } from "react" + +import { OryFlowComponents } from "../components" +import { OryFlowContainer } from "../util/flowContainer" import { OryComponentProvider } from "./component" import { OryFlowProvider } from "./flow-context" import { IntlProvider, - IntlProviderProps, + OryIntlProviderProps, SupportedTranslations, } from "./intl-context" -import { FlowContainer } from "../util/flowContainer" -export type ProviderProps = { +export type OryProviderProps = { components: OryFlowComponents -} & IntlProviderProps & - FlowContainer & - ComponentPropsWithoutRef<"div"> & +} & OryIntlProviderProps & + OryFlowContainer & PropsWithChildren -export function OryProvider({ +export function OryProvider({ children, components: Components, ...props -}: ProviderProps) { +}: OryProviderProps) { const { locale, defaultLocale, ...oryFlowProps } = props return ( diff --git a/packages/elements-react/src/tests/jest/test-utils.tsx b/packages/elements-react/src/tests/jest/test-utils.tsx index 52d172473..fd69f3a67 100644 --- a/packages/elements-react/src/tests/jest/test-utils.tsx +++ b/packages/elements-react/src/tests/jest/test-utils.tsx @@ -2,15 +2,15 @@ // SPDX-License-Identifier: Apache-2.0 import { PropsWithChildren, ReactElement, ReactNode } from "react" +import { OryComponentProvider } from "../../context/component" +import { OryDefaultComponents } from "../../theme/default" +import { render, RenderOptions } from "@testing-library/react" +import { OryClientConfiguration } from "../../util" import { - OryComponentProvider, OryProvider, - ProviderProps, + OryProviderProps, SupportedTranslations, } from "../../context" -import { OryDefaultComponents } from "../../theme/default" -import { render, RenderOptions } from "@testing-library/react" -import { OryClientConfiguration } from "../../util" const AllProviders = ({ children }: PropsWithChildren) => ( @@ -44,7 +44,7 @@ export function renderWithOryProvider( { providerProps, ...renderOptions - }: RenderOptions & { providerProps: ProviderProps }, + }: RenderOptions & { providerProps: OryProviderProps }, ) { return render(ui, { wrapper: ({ children }) => ( diff --git a/packages/elements-react/src/theme/default/components/card/auth-methods.tsx b/packages/elements-react/src/theme/default/components/card/auth-methods.tsx index f771fec0b..8fd938262 100644 --- a/packages/elements-react/src/theme/default/components/card/auth-methods.tsx +++ b/packages/elements-react/src/theme/default/components/card/auth-methods.tsx @@ -1,13 +1,13 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { HeadlessAuthMethodListItemProps } from "@ory/elements-react" +import { useIntl } from "react-intl" +import { OryCardAuthMethodListItemProps } from "@ory/elements-react" import code from "../../assets/icons/code.svg" import passkey from "../../assets/icons/passkey.svg" import password from "../../assets/icons/password.svg" import webauthn from "../../assets/icons/webauthn.svg" -import { useIntl } from "react-intl" const iconsMap: Record = { code, @@ -20,7 +20,7 @@ const iconsMap: Record = { export function DefaultAuthMethodListItem({ onClick, group, -}: HeadlessAuthMethodListItemProps) { +}: OryCardAuthMethodListItemProps) { const intl = useIntl() const Icon = iconsMap[group] || null diff --git a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx index a6e2fd052..52b62a92e 100644 --- a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx +++ b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { HeadlessCurrentIdentifierProps } from "@ory/elements-react" +import { OryCurrentIdentifierProps } from "@ory/elements-react" import IconArrowLeft from "../../assets/icons/arrow-left.svg" export function DefaultCurrentIdentifierButton({ @@ -9,7 +9,7 @@ export function DefaultCurrentIdentifierButton({ onClick, type, href, -}: HeadlessCurrentIdentifierProps) { +}: OryCurrentIdentifierProps) { const Element = onClick ? "button" : "a" return ( diff --git a/packages/elements-react/src/theme/default/components/card/header.tsx b/packages/elements-react/src/theme/default/components/card/header.tsx index 6315ec4c6..23ba05a4e 100644 --- a/packages/elements-react/src/theme/default/components/card/header.tsx +++ b/packages/elements-react/src/theme/default/components/card/header.tsx @@ -5,10 +5,10 @@ import { useComponents, useOryFlow } from "@ory/elements-react" import { useCardHeaderText } from "../../utils/constructCardHeader" function InnerCardHeader({ title, text }: { title: string; text?: string }) { - const { CardLogo } = useComponents() + const { Card } = useComponents() return (
- +

{title} diff --git a/packages/elements-react/src/theme/default/components/default-components.tsx b/packages/elements-react/src/theme/default/components/default-components.tsx index 9a1039cd3..92230db97 100644 --- a/packages/elements-react/src/theme/default/components/default-components.tsx +++ b/packages/elements-react/src/theme/default/components/default-components.tsx @@ -32,32 +32,34 @@ import { DefaultCurrentIdentifierButton } from "./card/current-identifier-button import { OryFlowComponents } from "@ory/elements-react" export const OryDefaultComponents: OryFlowComponents = { - Card: DefaultCard, - CardHeader: DefaultCardHeader, - CardContent: DefaultCardContent, - CardFooter: DefaultCardFooter, - CardLogo: DefaultCardLogo, - - // Generic - HorizontalDivider: DefaultHorizontalDivider, - - // Form - FormGroup: DefaultGroupContainer, - - SocialButtonContainer: DefaultSocialButtonContainer, - MessageContainer: DefaultMessageContainer, - Message: DefaultMessage, - Input: DefaultInput, - Image: DefaultImage, - Label: DefaultLabel, - Checkbox: DefaultCheckbox, - Text: DefaultText, - PinCodeInput: DefaultPinCodeInput, - Button: DefaultButton, - LinkButton: DefaultLinkButton, - SocialButton: DefaultButtonSocial, - FormContainer: DefaultFormContainer, - - AuthMethodListItem: DefaultAuthMethodListItem, - CurrentIdentifierButton: DefaultCurrentIdentifierButton, + Card: { + Root: DefaultCard, + Footer: DefaultCardFooter, + Header: DefaultCardHeader, + Content: DefaultCardContent, + Logo: DefaultCardLogo, + Divider: DefaultHorizontalDivider, + AuthMethodListItem: DefaultAuthMethodListItem, + }, + Node: { + Button: DefaultButton, + OidcButton: DefaultButtonSocial, + CurrentIdentifierButton: DefaultCurrentIdentifierButton, + Input: DefaultInput, + CodeInput: DefaultPinCodeInput, + Image: DefaultImage, + Label: DefaultLabel, + Checkbox: DefaultCheckbox, + Text: DefaultText, + Anchor: DefaultLinkButton, + }, + Form: { + Root: DefaultFormContainer, + Group: DefaultGroupContainer, + OidcRoot: DefaultSocialButtonContainer, + }, + Message: { + Root: DefaultMessageContainer, + Content: DefaultMessage, + }, } diff --git a/packages/elements-react/src/theme/default/components/form/button.tsx b/packages/elements-react/src/theme/default/components/form/button.tsx index 394b8f857..124f63d3f 100644 --- a/packages/elements-react/src/theme/default/components/form/button.tsx +++ b/packages/elements-react/src/theme/default/components/form/button.tsx @@ -1,18 +1,21 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 +import { getNodeLabel } from "@ory/client-fetch" +import { + OryNodeButtonProps, + uiTextToFormattedMessage, +} from "@ory/elements-react" import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { Spinner } from "./spinner" import { cn } from "../../utils/cn" -import { formatMessage, HeadlessButtonProps } from "@ory/elements-react" -import { getNodeLabel } from "@ory/client-fetch" +import { Spinner } from "./spinner" export const DefaultButton = ({ attributes, node, onClick, -}: HeadlessButtonProps) => { +}: OryNodeButtonProps) => { const { type, name, @@ -78,7 +81,7 @@ export const DefaultButton = ({ }, )} > - {formatMessage(label, intl)} + {label ? uiTextToFormattedMessage(label, intl) : ""} ) diff --git a/packages/elements-react/src/theme/default/components/form/checkbox.tsx b/packages/elements-react/src/theme/default/components/form/checkbox.tsx index ede84ac3c..2da0c0f5e 100644 --- a/packages/elements-react/src/theme/default/components/form/checkbox.tsx +++ b/packages/elements-react/src/theme/default/components/form/checkbox.tsx @@ -2,13 +2,16 @@ // SPDX-License-Identifier: Apache-2.0 "use client" +import { getNodeLabel } from "@ory/client-fetch" +import { + OryNodeInputProps, + messageTestId, + uiTextToFormattedMessage, +} from "@ory/elements-react" import { useState } from "react" import { useForm } from "react-hook-form" import { useIntl } from "react-intl" import { cn } from "../../utils/cn" -import { HeadlessInputProps } from "@ory/elements-react" -import { formatMessage, messageTestId } from "@ory/elements-react" -import { getNodeLabel } from "@ory/client-fetch" function CheckboxSVG() { return ( @@ -37,7 +40,7 @@ function CheckboxSVG() { export const DefaultCheckbox = ({ attributes: initialAttributes, node, -}: HeadlessInputProps) => { +}: OryNodeInputProps) => { const { value, name, @@ -79,7 +82,7 @@ export const DefaultCheckbox = ({

{node.messages.map((message) => ( - {formatMessage(message, intl)} + {uiTextToFormattedMessage(message, intl)} ))}
diff --git a/packages/elements-react/src/theme/default/components/form/group-container.tsx b/packages/elements-react/src/theme/default/components/form/group-container.tsx index 3db1832e2..7f3deb247 100644 --- a/packages/elements-react/src/theme/default/components/form/group-container.tsx +++ b/packages/elements-react/src/theme/default/components/form/group-container.tsx @@ -1,10 +1,8 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { HeadlessGroupContainerProps } from "@ory/elements-react" +import { OryFormGroupProps } from "@ory/elements-react" -export function DefaultGroupContainer({ - children, -}: HeadlessGroupContainerProps) { +export function DefaultGroupContainer({ children }: OryFormGroupProps) { return
{children}
} diff --git a/packages/elements-react/src/theme/default/components/form/image.tsx b/packages/elements-react/src/theme/default/components/form/image.tsx index 3649d6955..c4f88eeca 100644 --- a/packages/elements-react/src/theme/default/components/form/image.tsx +++ b/packages/elements-react/src/theme/default/components/form/image.tsx @@ -1,10 +1,9 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { HeadlessImageProps } from "@ory/elements-react" +import { OryNodeImageProps } from "@ory/elements-react" -export function DefaultImage({ attributes }: HeadlessImageProps) { - // const intl = useIntl() +export function DefaultImage({ attributes }: OryNodeImageProps) { return (
diff --git a/packages/elements-react/src/theme/default/components/form/index.tsx b/packages/elements-react/src/theme/default/components/form/index.tsx index 7a94010af..7d82f8ad7 100644 --- a/packages/elements-react/src/theme/default/components/form/index.tsx +++ b/packages/elements-react/src/theme/default/components/form/index.tsx @@ -3,16 +3,16 @@ import { PropsWithChildren } from "react" import { cn } from "../../utils/cn" -import { formatMessage, HeadlessFormProps } from "@ory/elements-react" -import { HeadlessMessageProps } from "@ory/elements-react" import { useIntl } from "react-intl" +import { OryFormRootProps, uiTextToFormattedMessage } from "@ory/elements-react" +import { OryMessageContentProps } from "@ory/elements-react" export function DefaultFormContainer({ children, onSubmit, action, method, -}: PropsWithChildren) { +}: PropsWithChildren) { return (
{children} } -export function DefaultMessage({ message }: HeadlessMessageProps) { +export function DefaultMessage({ message }: OryMessageContentProps) { const intl = useIntl() return ( - {formatMessage(message, intl)} + {uiTextToFormattedMessage(message, intl)} ) } diff --git a/packages/elements-react/src/theme/default/components/form/input.tsx b/packages/elements-react/src/theme/default/components/form/input.tsx index 703560323..b80105965 100644 --- a/packages/elements-react/src/theme/default/components/form/input.tsx +++ b/packages/elements-react/src/theme/default/components/form/input.tsx @@ -2,7 +2,10 @@ // SPDX-License-Identifier: Apache-2.0 import { getNodeLabel } from "@ory/client-fetch" -import { formatMessage, HeadlessInputProps } from "@ory/elements-react" +import { + OryNodeInputProps, + uiTextToFormattedMessage, +} from "@ory/elements-react" import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" @@ -10,7 +13,7 @@ export const DefaultInput = ({ node, attributes, onClick, -}: HeadlessInputProps) => { +}: OryNodeInputProps) => { const label = getNodeLabel(node) const { register } = useFormContext() const { value, autocomplete, name, maxlength, ...rest } = attributes @@ -23,7 +26,7 @@ export const DefaultInput = ({ defaultMessage: "Enter your {placeholder}", }, { - placeholder: formatMessage(label, intl), + placeholder: uiTextToFormattedMessage(label, intl), }, ) : "" diff --git a/packages/elements-react/src/theme/default/components/form/label.tsx b/packages/elements-react/src/theme/default/components/form/label.tsx index e73a40f05..7a0761982 100644 --- a/packages/elements-react/src/theme/default/components/form/label.tsx +++ b/packages/elements-react/src/theme/default/components/form/label.tsx @@ -2,10 +2,13 @@ // SPDX-License-Identifier: Apache-2.0 import { FlowType, getNodeLabel } from "@ory/client-fetch" +import { + OryNodeLabelProps, + messageTestId, + uiTextToFormattedMessage, + useOryFlow, +} from "@ory/elements-react" import { useIntl } from "react-intl" -import { useOryFlow } from "@ory/elements-react" -import { HeadlessLabelProps } from "@ory/elements-react" -import { formatMessage, messageTestId } from "@ory/elements-react" import { cn } from "../../utils/cn" export function DefaultLabel({ @@ -13,7 +16,7 @@ export function DefaultLabel({ children, attributes, ...rest -}: HeadlessLabelProps) { +}: OryNodeLabelProps) { const intl = useIntl() const label = getNodeLabel(node) const { config, flowType } = useOryFlow() @@ -32,7 +35,7 @@ export function DefaultLabel({ htmlFor={attributes.name} {...rest} > - {formatMessage(label, intl)} + {uiTextToFormattedMessage(label, intl)} {isPassword && config.project.recovery_enabled && @@ -68,7 +71,7 @@ export function DefaultLabel({ })} {...messageTestId(message)} > - {formatMessage(message, intl)} + {uiTextToFormattedMessage(message, intl)} ))} diff --git a/packages/elements-react/src/theme/default/components/form/link-button.tsx b/packages/elements-react/src/theme/default/components/form/link-button.tsx index 4ba6c5c9f..a68624d32 100644 --- a/packages/elements-react/src/theme/default/components/form/link-button.tsx +++ b/packages/elements-react/src/theme/default/components/form/link-button.tsx @@ -1,16 +1,18 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 +import { getNodeLabel } from "@ory/client-fetch" +import { + OryNodeAnchorProps, + uiTextToFormattedMessage, +} from "@ory/elements-react" import { forwardRef } from "react" import { useIntl } from "react-intl" import { cn } from "../../utils/cn" -import { HeadlessLinkButtonProps } from "@ory/elements-react" -import { formatMessage } from "@ory/elements-react" -import { getNodeLabel } from "@ory/client-fetch" export const DefaultLinkButton = forwardRef< HTMLAnchorElement, - HeadlessLinkButtonProps + OryNodeAnchorProps >(({ attributes, node }, ref) => { const intl = useIntl() const label = getNodeLabel(node) @@ -18,12 +20,12 @@ export const DefaultLinkButton = forwardRef< - {formatMessage(label, intl)} + {label ? uiTextToFormattedMessage(label, intl) : ""} ) }) diff --git a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx index 9900e55e1..45b5b417b 100644 --- a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx +++ b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx @@ -4,9 +4,9 @@ "use client" import { useFormContext } from "react-hook-form" import { InputOTP, InputOTPGroup, InputOTPSlot } from "./shadcn/otp-input" -import { HeadlessInputProps } from "@ory/elements-react" +import { OryNodeInputProps } from "@ory/elements-react" -export const DefaultPinCodeInput = ({ attributes }: HeadlessInputProps) => { +export const DefaultPinCodeInput = ({ attributes }: OryNodeInputProps) => { const { setValue, watch } = useFormContext() const { maxlength, name } = attributes const elements = maxlength ?? 6 diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx index 80200be0e..00729205b 100644 --- a/packages/elements-react/src/theme/default/components/form/social.tsx +++ b/packages/elements-react/src/theme/default/components/form/social.tsx @@ -2,9 +2,9 @@ // SPDX-License-Identifier: Apache-2.0 import { - formatMessage, - HeadlessSocialButtonContainerProps, - HeadlessSocialButtonProps, + OryFormOidcRootProps, + OryNodeOidcButtonProps, + uiTextToFormattedMessage, useOryFlow, } from "@ory/elements-react" import logos from "../../provider-logos" @@ -27,7 +27,7 @@ export function DefaultButtonSocial({ attributes, node, onClick, -}: HeadlessSocialButtonProps) { +}: OryNodeOidcButtonProps) { const { node_type: _ignoredNodeType, type: _ignoredType, @@ -73,9 +73,9 @@ export function DefaultButtonSocial({ )} - {showLabel ? ( + {showLabel && node.meta.label ? ( - {formatMessage(node.meta.label, intl)} + {uiTextToFormattedMessage(node.meta.label, intl)} ) : null} @@ -85,7 +85,7 @@ export function DefaultButtonSocial({ export function DefaultSocialButtonContainer({ children, nodes, -}: HeadlessSocialButtonContainerProps) { +}: OryFormOidcRootProps) { return (

- {formatMessage(node.meta.label, intl)} + {node.meta.label ? uiTextToFormattedMessage(node.meta.label, intl) : ""}

{( attributes.text.context as { @@ -19,7 +18,7 @@ export function DefaultText({ node, attributes }: HeadlessTextProps) { } ).secrets?.map((text: UiText, index) => ( 
-          {formatMessage(text, intl)}
+          {text ? uiTextToFormattedMessage(text, intl) : ""}
))} diff --git a/packages/elements-react/src/theme/default/flows/error.tsx b/packages/elements-react/src/theme/default/flows/error.tsx index 256614b85..d450bd245 100644 --- a/packages/elements-react/src/theme/default/flows/error.tsx +++ b/packages/elements-react/src/theme/default/flows/error.tsx @@ -3,12 +3,15 @@ "use client" import { FlowError } from "@ory/client-fetch" +import { + OryClientConfiguration, + OryFlowComponentOverrides, +} from "@ory/elements-react" import { PropsWithChildren } from "react" -import { OryClientConfiguration, OryFlowComponents } from "@ory/elements-react" export type ErrorFlowContextProps = { error: FlowError - components?: Partial + components?: OryFlowComponentOverrides config: OryClientConfiguration } diff --git a/packages/elements-react/src/theme/default/flows/login.tsx b/packages/elements-react/src/theme/default/flows/login.tsx index 499bfe110..9142d606f 100644 --- a/packages/elements-react/src/theme/default/flows/login.tsx +++ b/packages/elements-react/src/theme/default/flows/login.tsx @@ -5,16 +5,17 @@ import { FlowType, LoginFlow } from "@ory/client-fetch" import { OryClientConfiguration, - OryFlowComponents, + OryFlowComponentOverrides, OryProvider, OryTwoStepCard, } from "@ory/elements-react" +import merge from "lodash.merge" import { PropsWithChildren } from "react" import { OryDefaultComponents } from "../components" export type LoginFlowContextProps = { flow: LoginFlow - components?: Partial + components?: OryFlowComponentOverrides config: OryClientConfiguration } @@ -24,10 +25,9 @@ export function Login({ children, components: flowOverrideComponents, }: PropsWithChildren) { - const components = { - ...OryDefaultComponents, - ...flowOverrideComponents, - } + const components = flowOverrideComponents + ? merge({}, OryDefaultComponents, flowOverrideComponents) + : OryDefaultComponents return ( + components?: OryFlowComponentOverrides config: OryClientConfiguration } @@ -24,10 +25,9 @@ export function Recovery({ children, components: flowOverrideComponents, }: PropsWithChildren) { - const components = { - ...OryDefaultComponents, - ...flowOverrideComponents, - } + const components = flowOverrideComponents + ? merge({}, OryDefaultComponents, flowOverrideComponents) + : OryDefaultComponents return ( + components?: OryFlowComponentOverrides config: OryClientConfiguration } @@ -24,10 +25,9 @@ export function Registration({ components: flowOverrideComponents, config, }: PropsWithChildren) { - const components = { - ...OryDefaultComponents, - ...flowOverrideComponents, - } + const components = flowOverrideComponents + ? merge({}, OryDefaultComponents, flowOverrideComponents) + : OryDefaultComponents return ( + components?: OryFlowComponentOverrides config: OryClientConfiguration } @@ -24,10 +25,9 @@ export function Settings({ children, components: flowOverrideComponents, }: PropsWithChildren) { - const components = { - ...OryDefaultComponents, - ...flowOverrideComponents, - } + const components = flowOverrideComponents + ? merge({}, OryDefaultComponents, flowOverrideComponents) + : OryDefaultComponents return ( + components?: OryFlowComponentOverrides config: OryClientConfiguration } @@ -24,10 +25,9 @@ export function Verification({ children, components: flowOverrideComponents, }: PropsWithChildren) { - const components = { - ...OryDefaultComponents, - ...flowOverrideComponents, - } + const components = flowOverrideComponents + ? merge({}, OryDefaultComponents, flowOverrideComponents) + : OryDefaultComponents return ( , "children"> -export type HeadlessCurrentIdentifierProps = { +export type OryCurrentIdentifierProps = { attributes: UiNodeInputAttributes node: UiNode onClick?: () => void href?: string } & Omit, "children" | "onClick"> -export type HeadlessLinkButtonProps = { +export type OryNodeAnchorProps = { attributes: UiNodeAnchorAttributes node: UiNode } & Omit, "children"> -export type HeadlessLabelProps = { +export type OryNodeLabelProps = { attributes: UiNodeInputAttributes node: UiNode } & ComponentPropsWithoutRef<"label"> -export type HeadlessTextProps = { +export type OryNodeTextProps = { attributes: UiNodeTextAttributes node: UiNode } -export type HeadlessAuthMethodListItemProps = { +export type OryCardLogoProps = Record + +/** + * Props for the AuthMethodListItem component. This component is used + * to render a single auth method in the AuthMethodList component. + */ +export type OryCardAuthMethodListItemProps = { onClick: () => void group: string } -export type HeadlessImageProps = { +export type OryNodeImageProps = { attributes: UiNodeImageAttributes node: UiNode } +/** + * A generic type for the form values. + */ export type FormValues = Record -export type HeadlessFormProps = ComponentPropsWithoutRef<"form"> & { +export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & { onSubmit: FormEventHandler } -export type HeadlessInputProps = { +export type OryNodeInputProps = { attributes: UiNodeInputAttributes node: UiNode onClick?: MouseEventHandler } - -export type OryFlowComponents = OryFormComponents & OryCardComponents diff --git a/packages/elements-react/src/util/flowContainer.ts b/packages/elements-react/src/util/flowContainer.ts index 228107a23..72a64de52 100644 --- a/packages/elements-react/src/util/flowContainer.ts +++ b/packages/elements-react/src/util/flowContainer.ts @@ -12,26 +12,76 @@ import { } from "@ory/client-fetch" import { OryClientConfiguration } from "./clientConfiguration" -type BaseFlow = { +/** + * A generic flow container, containing a flowType, the flow itself and the config object + * + * @see OryClientConfiguration + */ +type OryFlow = { flowType: TFlowType flow: TFlow config: OryClientConfiguration } -export type LoginFlowContainer = BaseFlow -export type RegistrationFlowContainer = BaseFlow< +/** + * A flow container for the login flow + * + * @see OryFlow + * @see LoginFlow + */ +export type LoginFlowContainer = OryFlow + +/** + * A flow container for the registration flow + * + * @see OryFlow + * @see RegistrationFlow + */ +export type RegistrationFlowContainer = OryFlow< FlowType.Registration, RegistrationFlow > -export type RecoveryFlowContainer = BaseFlow -export type VerificationFlowContainer = BaseFlow< + +/** + * A flow container for the recovery flow + * + * @see OryFlow + * @see RecoveryFlow + */ +export type RecoveryFlowContainer = OryFlow + +/** + * A flow container for the verification flow + * + * @see OryFlow + * @see VerificationFlow + * + */ +export type VerificationFlowContainer = OryFlow< FlowType.Verification, VerificationFlow > -export type SettingsFlowContainer = BaseFlow -export type ErrorFlowContainer = BaseFlow +/** + * A flow container for the settings flow + * + * @see OryFlow + * @see SettingsFlow + */ +export type SettingsFlowContainer = OryFlow + +/** + * A flow container for the error flow + * + * @see OryFlow + * @see FlowError (Error flow) + * + */ +export type ErrorFlowContainer = OryFlow -export type FlowContainer = +/** + * A union type of all flow containers + */ +export type OryFlowContainer = | LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer diff --git a/packages/elements-react/src/util/i18n/__tests__/test-components.tsx b/packages/elements-react/src/util/i18n/__tests__/test-components.tsx index 010ca1e21..980bcd209 100644 --- a/packages/elements-react/src/util/i18n/__tests__/test-components.tsx +++ b/packages/elements-react/src/util/i18n/__tests__/test-components.tsx @@ -1,12 +1,12 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { formatMessage } from "../index" import { UiText } from "@ory/client-fetch" import { useIntl } from "react-intl" +import { uiTextToFormattedMessage } from "../index" export const Inner = ({ uiText }: { uiText: UiText }) => { const intl = useIntl() - return
{formatMessage(uiText, intl)}
+ return
{uiTextToFormattedMessage(uiText, intl)}
} diff --git a/packages/elements-react/src/util/i18n/index.ts b/packages/elements-react/src/util/i18n/index.ts index 094697897..fa0da8877 100644 --- a/packages/elements-react/src/util/i18n/index.ts +++ b/packages/elements-react/src/util/i18n/index.ts @@ -4,13 +4,6 @@ import { UiText } from "@ory/client-fetch" import { IntlShape } from "react-intl" -export function formatMessage(uiText: UiText | undefined, intl: IntlShape) { - if (!uiText) { - return "" - } - return uiTextToFormattedMessage(uiText, intl) -} - /** * Converts a UiText to a FormattedMessage. * The UiText contains the id of the message and the context. diff --git a/packages/elements-react/src/util/index.ts b/packages/elements-react/src/util/index.ts index b9cb65cc8..d73561cb7 100644 --- a/packages/elements-react/src/util/index.ts +++ b/packages/elements-react/src/util/index.ts @@ -1,13 +1,8 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -export * from "./test-id" -export * from "./i18n" -export * from "./onSubmitLogin" -export * from "./onSubmitSettings" -export * from "./onSubmitRecovery" -export * from "./onSubmitVerification" -export * from "./onSubmitRegistration" export * from "./clientConfiguration" export * from "./flowContainer" +export * from "./i18n" export * from "./submitHandler" +export * from "./test-id" diff --git a/packages/elements-react/src/util/onSubmitLogin.ts b/packages/elements-react/src/util/onSubmitLogin.ts index 46df83502..b1677ce78 100644 --- a/packages/elements-react/src/util/onSubmitLogin.ts +++ b/packages/elements-react/src/util/onSubmitLogin.ts @@ -9,7 +9,7 @@ import { UpdateLoginFlowBody, } from "@ory/client-fetch" import { OnSubmitHandlerProps } from "./submitHandler" -import { FlowContainer } from "./flowContainer" +import { OryFlowContainer } from "./flowContainer" import { frontendClient } from "./client" /** @@ -22,7 +22,7 @@ import { frontendClient } from "./client" * @param onRedirect - This method is used to redirect the user to a different page. */ export async function onSubmitLogin( - { config, flow }: FlowContainer, + { config, flow }: OryFlowContainer, { setFlowContainer, body, diff --git a/packages/elements-react/src/util/onSubmitRecovery.ts b/packages/elements-react/src/util/onSubmitRecovery.ts index 02a91dfa6..abbba7596 100644 --- a/packages/elements-react/src/util/onSubmitRecovery.ts +++ b/packages/elements-react/src/util/onSubmitRecovery.ts @@ -9,7 +9,7 @@ import { recoveryUrl, UpdateRecoveryFlowBody, } from "@ory/client-fetch" -import { FlowContainer } from "./flowContainer" +import { OryFlowContainer } from "./flowContainer" import { OnSubmitHandlerProps } from "./submitHandler" import { frontendClient } from "./client" @@ -23,7 +23,7 @@ import { frontendClient } from "./client" * @param onRedirect - This method is used to redirect the user to a different page. */ export async function onSubmitRecovery( - { config, flow }: FlowContainer, + { config, flow }: OryFlowContainer, { setFlowContainer, body, diff --git a/packages/elements-react/src/util/onSubmitRegistration.ts b/packages/elements-react/src/util/onSubmitRegistration.ts index 5788c9b88..dc858b0dd 100644 --- a/packages/elements-react/src/util/onSubmitRegistration.ts +++ b/packages/elements-react/src/util/onSubmitRegistration.ts @@ -9,7 +9,7 @@ import { registrationUrl, UpdateRegistrationFlowBody, } from "@ory/client-fetch" -import { FlowContainer } from "./flowContainer" +import { OryFlowContainer } from "./flowContainer" import { OnSubmitHandlerProps } from "./submitHandler" import { frontendClient } from "./client" @@ -23,7 +23,7 @@ import { frontendClient } from "./client" * @param onRedirect - This method is used to redirect the user to a different page. */ export async function onSubmitRegistration( - { config, flow }: FlowContainer, + { config, flow }: OryFlowContainer, { setFlowContainer, body, diff --git a/packages/elements-react/src/util/onSubmitSettings.ts b/packages/elements-react/src/util/onSubmitSettings.ts index 7ce49d1e7..36e4f8c7d 100644 --- a/packages/elements-react/src/util/onSubmitSettings.ts +++ b/packages/elements-react/src/util/onSubmitSettings.ts @@ -9,7 +9,7 @@ import { settingsUrl, UpdateSettingsFlowBody, } from "@ory/client-fetch" -import { FlowContainer } from "./flowContainer" +import { OryFlowContainer } from "./flowContainer" import { OnSubmitHandlerProps } from "./submitHandler" import { frontendClient } from "./client" @@ -23,7 +23,7 @@ import { frontendClient } from "./client" * @param onRedirect - This method is used to redirect the user to a different page. */ export async function onSubmitSettings( - { config, flow }: FlowContainer, + { config, flow }: OryFlowContainer, { setFlowContainer, body, diff --git a/packages/elements-react/src/util/onSubmitVerification.ts b/packages/elements-react/src/util/onSubmitVerification.ts index d05ece4a6..5ebee3013 100644 --- a/packages/elements-react/src/util/onSubmitVerification.ts +++ b/packages/elements-react/src/util/onSubmitVerification.ts @@ -8,7 +8,7 @@ import { VerificationFlow, verificationUrl, } from "@ory/client-fetch" -import { FlowContainer } from "./flowContainer" +import { OryFlowContainer } from "./flowContainer" import { OnSubmitHandlerProps } from "./submitHandler" import { frontendClient } from "./client" @@ -22,7 +22,7 @@ import { frontendClient } from "./client" * @param onRedirect - This method is used to redirect the user to a different page. */ export async function onSubmitVerification( - { config, flow }: FlowContainer, + { config, flow }: OryFlowContainer, { setFlowContainer, body, diff --git a/packages/elements-react/src/util/submitHandler.ts b/packages/elements-react/src/util/submitHandler.ts index d555f34ad..88f31bc5a 100644 --- a/packages/elements-react/src/util/submitHandler.ts +++ b/packages/elements-react/src/util/submitHandler.ts @@ -9,8 +9,11 @@ import { UpdateSettingsFlowBody, UpdateVerificationFlowBody, } from "@ory/client-fetch" -import { FlowContainer } from "./flowContainer" +import { OryFlowContainer } from "./flowContainer" +/** + * Props for the submit handler + */ export type OnSubmitHandlerProps< T extends | UpdateLoginFlowBody @@ -22,7 +25,7 @@ export type OnSubmitHandlerProps< /** * This method is used to update the flow container when a validation error occurs, for example. */ - setFlowContainer: (flowContainer: FlowContainer) => void + setFlowContainer: (flowContainer: OryFlowContainer) => void /** * The form values to submit. diff --git a/packages/elements-react/src/util/test-id.ts b/packages/elements-react/src/util/test-id.ts index 7ce554f4a..40c8c70bc 100644 --- a/packages/elements-react/src/util/test-id.ts +++ b/packages/elements-react/src/util/test-id.ts @@ -3,20 +3,14 @@ import { UiText } from "@ory/client-fetch" +/** + * Helper function to generate a test id for a UiText message. + * + * @param message - the UiText message to generate a test id for + * @returns a unique, stable test id for the message + */ export function messageTestId(message: UiText) { return { "data-testid": `ory-message-${message.id}`, } } - -export function formElementId(attributes: { name: string }) { - return { - id: `ory-elements-form-${attributes.name}`, - } -} - -export function formLabelId(attributes: { name: string }) { - return { - htmlFor: `ory-elements-form-${attributes.name}`, - } -}