diff --git a/docs/elements/guides/04_configuration.mdx b/docs/elements/guides/04_configuration.mdx index 0ef6a28635..03ef66097d 100644 --- a/docs/elements/guides/04_configuration.mdx +++ b/docs/elements/guides/04_configuration.mdx @@ -18,9 +18,9 @@ allows you to use the default UI but still configure certain behaviors and URLs Define the project configuration in your application like this: ```ts title="projectConfig.ts" -import { AccountExperienceConfiguration } from "@ory/elements-react" +import { ProjectConfiguration } from "@ory/elements-react" -const projectConfig: AccountExperienceConfiguration = { +const projectConfig: ProjectConfiguration = { default_locale: "en", // default locale for the UI default_redirect_url: "https://example.com/dashboard", // URL to redirect after successful login or registration error_ui_url: "https://example.com/error", // URL to handle errors @@ -67,10 +67,10 @@ function App() { ### UI URLs -To set the URLs for various UI components, you can use the following properties in the `AccountExperienceConfiguration`: +To set the URLs for various UI components, you can use the following properties in the `ProjectConfiguration`: ```typescript title="projectConfig.ts" -const projectConfig: AccountExperienceConfiguration = { +const projectConfig: ProjectConfiguration = { login_ui_url: "https://example.com/login", registration_ui_url: "https://example.com/register", recovery_ui_url: "https://example.com/recovery", @@ -84,7 +84,7 @@ These will be used when the respective actions are triggered, such as when a use account and should match the URLs of your application's UI. You can also set the `error_ui_url` to handle errors in a custom way: ```typescript title="projectConfig.ts" -const projectConfig: AccountExperienceConfiguration = { +const projectConfig: ProjectConfiguration = { error_ui_url: "https://example.com/error", // .... } @@ -95,7 +95,7 @@ const projectConfig: AccountExperienceConfiguration = { To set the logos for the light theme, you can use the following properties: ```typescript title="projectConfig.ts" -const projectConfig: AccountExperienceConfiguration = { +const projectConfig: ProjectConfiguration = { logo_light_url: "https://example.com/logo-light.png", // .... } @@ -106,7 +106,7 @@ const projectConfig: AccountExperienceConfiguration = { To set a default locale: ```typescript title="projectConfig.ts" -const projectConfig: AccountExperienceConfiguration = { +const projectConfig: ProjectConfiguration = { default_locale: "en", // .... } diff --git a/docs/elements/guides/05_migration_0x.mdx b/docs/elements/guides/05_upgrading.mdx similarity index 71% rename from docs/elements/guides/05_migration_0x.mdx rename to docs/elements/guides/05_upgrading.mdx index 42fba28ad8..d5bb29aed6 100644 --- a/docs/elements/guides/05_migration_0x.mdx +++ b/docs/elements/guides/05_upgrading.mdx @@ -1,9 +1,42 @@ --- -id: migration-0x -title: Migration from Ory Elements 0.x to 1.x -sidebar_label: Migration from 0.x to 1.x +id: upgrade +title: Upgrade Ory Elements +sidebar_label: Upgrading --- +# Upgrade Guide + +## Ory Elements 1.1.0 to 1.2.0 upgrade guide + +This guide will show you how to migrate from Ory Elements 1.1.0 to 1.2.0. + +If you are current overriding components using the `components` prop, you may need to update your overrides to pass the correct +props to your custom components. + +- `Node.Button`: Now receives additional props: + - `isSubmitting`: This prop indicates whether this button was used to submit the form and the form is currently submitting. + - `buttonProps`: This prop contains all other button-related props that should be spread onto the button element. +- `Node.Input`: Now receives additional props: + - `inputProps`: This prop contains all other input-related props that should be spread onto the input element. +- `Node.Checkbox`: + - `inputProps`: This prop contains all other checkbox-related props that should be spread onto the checkbox input element. +- `Node.ConsentScopeCheckbox`: + - `inputProps`: This prop contains all other checkbox-related props that should be spread onto the checkbox input element. +- `Node.Label`: + - `fieldError`: This prop contains the error message associated with the field, if any. +- Settings Pages: + - Each settings section now similarly receives the nodes with a `buttonProps` or `inputProps` prop, depending on the type of + node. + +## Fixes + +- If you were using the `RecoveryCodesSettings` component, there was a typo in the prop name for regenerating codes. The correct + prop name is now `regenerateButton` instead of `regnerateButton`. + +See the full release notes here: [Ory Elements 1.2.0 Release Notes](https://github.com/ory/elements/releases/tag/v1.2.0) + +## Ory Elements 0.x to 1.x Upgrade Guide + This guide will show you how to migrate from Ory Elements 0.x to 1.x. Ory Elements 1.0 is a complete rewrite of the Ory Elements 0.x library. It is not backwards compatible with 0.x. diff --git a/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider.md b/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider.md index e8e9320207..7aaefecae5 100644 --- a/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider.md +++ b/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider.md @@ -3,7 +3,7 @@ ```ts function OryConfigurationProvider(props: { children?: ReactNode - project?: Partial + project?: Partial sdk?: { options?: Partial url?: string @@ -15,14 +15,14 @@ The `OryConfigurationProvider` component provides the Ory Elements configuration ## Parameters -| Parameter | Type | Description | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; `project?`: `Partial`\<`AccountExperienceConfiguration`\>; `sdk?`: \{ `options?`: `Partial`\<`ConfigurationParameters`\>; `url?`: `string`; \}; \} | The properties for the OryConfigurationProvider component. | -| `props.children?` | `ReactNode` | - | -| `props.project?` | `Partial`\<`AccountExperienceConfiguration`\> | This configuration is used to customize the behavior and appearance of Ory Elements. | -| `props.sdk?` | \{ `options?`: `Partial`\<`ConfigurationParameters`\>; `url?`: `string`; \} | The Ory SDK configuration to use. If not provided, the SDK URL will be determined automatically based on the environment. Always required for production environments. | -| `props.sdk.options?` | `Partial`\<`ConfigurationParameters`\> | Additional parameters for the Ory SDK configuration. This can include options like headers, credentials, and other settings. | -| `props.sdk.url?` | `string` | The URL the Ory SDK should connect to. This is typically the base URL of your Ory instance. | +| Parameter | Type | Description | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; `project?`: `Partial`\<[`ProjectConfiguration`](../interfaces/ProjectConfiguration.md)\>; `sdk?`: \{ `options?`: `Partial`\<`ConfigurationParameters`\>; `url?`: `string`; \}; \} | The properties for the OryConfigurationProvider component. | +| `props.children?` | `ReactNode` | - | +| `props.project?` | `Partial`\<[`ProjectConfiguration`](../interfaces/ProjectConfiguration.md)\> | This configuration is used to customize the behavior and appearance of Ory Elements. | +| `props.sdk?` | \{ `options?`: `Partial`\<`ConfigurationParameters`\>; `url?`: `string`; \} | The Ory SDK configuration to use. If not provided, the SDK URL will be determined automatically based on the environment. Always required for production environments. | +| `props.sdk.options?` | `Partial`\<`ConfigurationParameters`\> | Additional parameters for the Ory SDK configuration. This can include options like headers, credentials, and other settings. | +| `props.sdk.url?` | `string` | The URL the Ory SDK should connect to. This is typically the base URL of your Ory instance. | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/functions/OrySettingsFormSection.md b/docs/elements/reference/@ory/elements-react/functions/OrySettingsFormSection.md index 914d10bdf8..f6e51f4bae 100644 --- a/docs/elements/reference/@ory/elements-react/functions/OrySettingsFormSection.md +++ b/docs/elements/reference/@ory/elements-react/functions/OrySettingsFormSection.md @@ -7,7 +7,7 @@ function OrySettingsFormSection(props: { accessKey?: string; aria-activedescendant?: string; aria-atomic?: Booleanish; - aria-autocomplete?: "inline" | "list" | "none" | "both"; + aria-autocomplete?: "none" | "inline" | "list" | "both"; aria-braillelabel?: string; aria-brailleroledescription?: string; aria-busy?: Booleanish; @@ -17,23 +17,23 @@ function OrySettingsFormSection(props: { aria-colindextext?: string; aria-colspan?: number; aria-controls?: string; - aria-current?: boolean | "true" | "false" | "time" | "date" | "page" | "step" | "location"; + aria-current?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location"; aria-describedby?: string; aria-description?: string; aria-details?: string; aria-disabled?: Booleanish; - aria-dropeffect?: "copy" | "link" | "none" | "execute" | "move" | "popup"; + aria-dropeffect?: "none" | "copy" | "link" | "execute" | "move" | "popup"; aria-errormessage?: string; aria-expanded?: Booleanish; aria-flowto?: string; aria-grabbed?: Booleanish; aria-haspopup?: | boolean + | "dialog" + | "menu" | "true" | "false" - | "dialog" | "grid" | "listbox" - | "menu" | "tree"; aria-hidden?: Booleanish; aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"; @@ -74,9 +74,9 @@ function OrySettingsFormSection(props: { aria-valuemin?: number; aria-valuenow?: number; aria-valuetext?: string; - autoCapitalize?: | string & { + autoCapitalize?: | "none" + | string & { } - | "none" | "off" | "on" | "sentences" @@ -106,9 +106,9 @@ function OrySettingsFormSection(props: { hidden?: boolean; id?: string; inlist?: any; - inputMode?: | "text" + inputMode?: | "none" + | "text" | "search" - | "none" | "email" | "tel" | "url" @@ -316,13 +316,13 @@ Can be used independently to render a form section with Ory nodes. | Parameter | Type | Description | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `about?`: `string`; `acceptCharset?`: `string`; `accessKey?`: `string`; `aria-activedescendant?`: `string`; `aria-atomic?`: `Booleanish`; `aria-autocomplete?`: `"inline"` \| `"list"` \| `"none"` \| `"both"`; `aria-braillelabel?`: `string`; `aria-brailleroledescription?`: `string`; `aria-busy?`: `Booleanish`; `aria-checked?`: `boolean` \| `"true"` \| `"false"` \| `"mixed"`; `aria-colcount?`: `number`; `aria-colindex?`: `number`; `aria-colindextext?`: `string`; `aria-colspan?`: `number`; `aria-controls?`: `string`; `aria-current?`: `boolean` \| `"true"` \| `"false"` \| `"time"` \| `"date"` \| `"page"` \| `"step"` \| `"location"`; `aria-describedby?`: `string`; `aria-description?`: `string`; `aria-details?`: `string`; `aria-disabled?`: `Booleanish`; `aria-dropeffect?`: `"copy"` \| `"link"` \| `"none"` \| `"execute"` \| `"move"` \| `"popup"`; `aria-errormessage?`: `string`; `aria-expanded?`: `Booleanish`; `aria-flowto?`: `string`; `aria-grabbed?`: `Booleanish`; `aria-haspopup?`: \| `boolean` \| `"true"` \| `"false"` \| `"dialog"` \| `"grid"` \| `"listbox"` \| `"menu"` \| `"tree"`; `aria-hidden?`: `Booleanish`; `aria-invalid?`: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"`; `aria-keyshortcuts?`: `string`; `aria-label?`: `string`; `aria-labelledby?`: `string`; `aria-level?`: `number`; `aria-live?`: `"off"` \| `"assertive"` \| `"polite"`; `aria-modal?`: `Booleanish`; `aria-multiline?`: `Booleanish`; `aria-multiselectable?`: `Booleanish`; `aria-orientation?`: `"horizontal"` \| `"vertical"`; `aria-owns?`: `string`; `aria-placeholder?`: `string`; `aria-posinset?`: `number`; `aria-pressed?`: `boolean` \| `"true"` \| `"false"` \| `"mixed"`; `aria-readonly?`: `Booleanish`; `aria-relevant?`: \| `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"`; `aria-required?`: `Booleanish`; `aria-roledescription?`: `string`; `aria-rowcount?`: `number`; `aria-rowindex?`: `number`; `aria-rowindextext?`: `string`; `aria-rowspan?`: `number`; `aria-selected?`: `Booleanish`; `aria-setsize?`: `number`; `aria-sort?`: `"none"` \| `"other"` \| `"ascending"` \| `"descending"`; `aria-valuemax?`: `number`; `aria-valuemin?`: `number`; `aria-valuenow?`: `number`; `aria-valuetext?`: `string`; `autoCapitalize?`: \| `string` & \{ \} \| `"none"` \| `"off"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"`; `autoComplete?`: `string`; `autoCorrect?`: `string`; `autoFocus?`: `boolean`; `autoSave?`: `string`; `children?`: `ReactNode`; `className?`: `string`; `color?`: `string`; `content?`: `string`; `contentEditable?`: `Booleanish` \| `"inherit"` \| `"plaintext-only"`; `contextMenu?`: `string`; `dangerouslySetInnerHTML?`: \{ `__html`: `string` \| `TrustedHTML`; \}; `datatype?`: `string`; `defaultChecked?`: `boolean`; `defaultValue?`: `string` \| `number` \| readonly `string`[]; `dir?`: `string`; `draggable?`: `Booleanish`; `encType?`: `string`; `enterKeyHint?`: `"search"` \| `"previous"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"send"`; `exportparts?`: `string`; `hidden?`: `boolean`; `id?`: `string`; `inlist?`: `any`; `inputMode?`: \| `"text"` \| `"search"` \| `"none"` \| `"email"` \| `"tel"` \| `"url"` \| `"numeric"` \| `"decimal"`; `is?`: `string`; `itemID?`: `string`; `itemProp?`: `string`; `itemRef?`: `string`; `itemScope?`: `boolean`; `itemType?`: `string`; `key?`: `null` \| `Key`; `lang?`: `string`; `name?`: `string`; `nodes?`: `UiNode`[]; `nonce?`: `string`; `noValidate?`: `boolean`; `onAbort?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onAbortCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onAnimationEnd?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationEndCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationIteration?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationIterationCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationStart?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationStartCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAuxClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onAuxClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onBeforeInput?`: `FormEventHandler`\<`HTMLFormElement`\>; `onBeforeInputCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onBlur?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onBlurCapture?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onCanPlay?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayThrough?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayThroughCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onChange?`: `FormEventHandler`\<`HTMLFormElement`\>; `onChangeCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onCompositionEnd?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionEndCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionStart?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionStartCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionUpdate?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionUpdateCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onContextMenu?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onContextMenuCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onCopy?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCopyCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCut?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCutCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onDoubleClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onDoubleClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onDrag?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnd?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEndCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnter?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnterCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragExit?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragExitCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragLeave?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragLeaveCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragOver?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragOverCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragStart?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragStartCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDrop?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDropCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDurationChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onDurationChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEmptied?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEmptiedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEncrypted?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEncryptedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEnded?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEndedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onError?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onErrorCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onFocus?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onFocusCapture?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onGotPointerCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onGotPointerCaptureCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onInput?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInputCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInvalid?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInvalidCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onKeyDown?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyDownCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyPress?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyPressCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyUp?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyUpCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onLoad?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedData?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedDataCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedMetadata?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedMetadataCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadStart?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadStartCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLostPointerCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onLostPointerCaptureCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onMouseDown?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseDownCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseEnter?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseLeave?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseMove?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseMoveCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOut?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOutCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOver?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOverCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseUp?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseUpCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onPaste?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onPasteCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onPause?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPauseCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlay?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlayCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlaying?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlayingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPointerCancel?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerCancelCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerDown?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerDownCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerEnter?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerLeave?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerMove?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerMoveCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOut?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOutCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOver?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOverCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerUp?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerUpCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onProgress?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onProgressCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onRateChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onRateChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onReset?`: `FormEventHandler`\<`HTMLFormElement`\>; `onResetCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onScroll?`: `UIEventHandler`\<`HTMLFormElement`\>; `onScrollCapture?`: `UIEventHandler`\<`HTMLFormElement`\>; `onSeeked?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeekedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeeking?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeekingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSelect?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSelectCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onStalled?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onStalledCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSubmitCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onSuspend?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSuspendCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTimeUpdate?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTimeUpdateCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTouchCancel?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchCancelCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchEnd?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchEndCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchMove?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchMoveCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchStart?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchStartCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTransitionEnd?`: `TransitionEventHandler`\<`HTMLFormElement`\>; `onTransitionEndCapture?`: `TransitionEventHandler`\<`HTMLFormElement`\>; `onVolumeChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onVolumeChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWaiting?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWaitingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWheel?`: `WheelEventHandler`\<`HTMLFormElement`\>; `onWheelCapture?`: `WheelEventHandler`\<`HTMLFormElement`\>; `part?`: `string`; `prefix?`: `string`; `property?`: `string`; `radioGroup?`: `string`; `rel?`: `string`; `resource?`: `string`; `results?`: `number`; `rev?`: `string`; `role?`: `AriaRole`; `security?`: `string`; `slot?`: `string`; `spellCheck?`: `Booleanish`; `style?`: `CSSProperties`; `suppressContentEditableWarning?`: `boolean`; `suppressHydrationWarning?`: `boolean`; `tabIndex?`: `number`; `target?`: `string`; `title?`: `string`; `translate?`: `"no"` \| `"yes"`; `typeof?`: `string`; `unselectable?`: `"off"` \| `"on"`; `vocab?`: `string`; \} | The properties for the OrySettingsFormSection component. | +| `props` | \{ `about?`: `string`; `acceptCharset?`: `string`; `accessKey?`: `string`; `aria-activedescendant?`: `string`; `aria-atomic?`: `Booleanish`; `aria-autocomplete?`: `"none"` \| `"inline"` \| `"list"` \| `"both"`; `aria-braillelabel?`: `string`; `aria-brailleroledescription?`: `string`; `aria-busy?`: `Booleanish`; `aria-checked?`: `boolean` \| `"true"` \| `"false"` \| `"mixed"`; `aria-colcount?`: `number`; `aria-colindex?`: `number`; `aria-colindextext?`: `string`; `aria-colspan?`: `number`; `aria-controls?`: `string`; `aria-current?`: `boolean` \| `"time"` \| `"date"` \| `"true"` \| `"false"` \| `"page"` \| `"step"` \| `"location"`; `aria-describedby?`: `string`; `aria-description?`: `string`; `aria-details?`: `string`; `aria-disabled?`: `Booleanish`; `aria-dropeffect?`: `"none"` \| `"copy"` \| `"link"` \| `"execute"` \| `"move"` \| `"popup"`; `aria-errormessage?`: `string`; `aria-expanded?`: `Booleanish`; `aria-flowto?`: `string`; `aria-grabbed?`: `Booleanish`; `aria-haspopup?`: \| `boolean` \| `"dialog"` \| `"menu"` \| `"true"` \| `"false"` \| `"grid"` \| `"listbox"` \| `"tree"`; `aria-hidden?`: `Booleanish`; `aria-invalid?`: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"`; `aria-keyshortcuts?`: `string`; `aria-label?`: `string`; `aria-labelledby?`: `string`; `aria-level?`: `number`; `aria-live?`: `"off"` \| `"assertive"` \| `"polite"`; `aria-modal?`: `Booleanish`; `aria-multiline?`: `Booleanish`; `aria-multiselectable?`: `Booleanish`; `aria-orientation?`: `"horizontal"` \| `"vertical"`; `aria-owns?`: `string`; `aria-placeholder?`: `string`; `aria-posinset?`: `number`; `aria-pressed?`: `boolean` \| `"true"` \| `"false"` \| `"mixed"`; `aria-readonly?`: `Booleanish`; `aria-relevant?`: \| `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"`; `aria-required?`: `Booleanish`; `aria-roledescription?`: `string`; `aria-rowcount?`: `number`; `aria-rowindex?`: `number`; `aria-rowindextext?`: `string`; `aria-rowspan?`: `number`; `aria-selected?`: `Booleanish`; `aria-setsize?`: `number`; `aria-sort?`: `"none"` \| `"other"` \| `"ascending"` \| `"descending"`; `aria-valuemax?`: `number`; `aria-valuemin?`: `number`; `aria-valuenow?`: `number`; `aria-valuetext?`: `string`; `autoCapitalize?`: \| `"none"` \| `string` & \{ \} \| `"off"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"`; `autoComplete?`: `string`; `autoCorrect?`: `string`; `autoFocus?`: `boolean`; `autoSave?`: `string`; `children?`: `ReactNode`; `className?`: `string`; `color?`: `string`; `content?`: `string`; `contentEditable?`: `Booleanish` \| `"inherit"` \| `"plaintext-only"`; `contextMenu?`: `string`; `dangerouslySetInnerHTML?`: \{ `__html`: `string` \| `TrustedHTML`; \}; `datatype?`: `string`; `defaultChecked?`: `boolean`; `defaultValue?`: `string` \| `number` \| readonly `string`[]; `dir?`: `string`; `draggable?`: `Booleanish`; `encType?`: `string`; `enterKeyHint?`: `"search"` \| `"previous"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"send"`; `exportparts?`: `string`; `hidden?`: `boolean`; `id?`: `string`; `inlist?`: `any`; `inputMode?`: \| `"none"` \| `"text"` \| `"search"` \| `"email"` \| `"tel"` \| `"url"` \| `"numeric"` \| `"decimal"`; `is?`: `string`; `itemID?`: `string`; `itemProp?`: `string`; `itemRef?`: `string`; `itemScope?`: `boolean`; `itemType?`: `string`; `key?`: `null` \| `Key`; `lang?`: `string`; `name?`: `string`; `nodes?`: `UiNode`[]; `nonce?`: `string`; `noValidate?`: `boolean`; `onAbort?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onAbortCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onAnimationEnd?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationEndCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationIteration?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationIterationCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationStart?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationStartCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAuxClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onAuxClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onBeforeInput?`: `FormEventHandler`\<`HTMLFormElement`\>; `onBeforeInputCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onBlur?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onBlurCapture?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onCanPlay?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayThrough?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayThroughCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onChange?`: `FormEventHandler`\<`HTMLFormElement`\>; `onChangeCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onCompositionEnd?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionEndCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionStart?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionStartCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionUpdate?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionUpdateCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onContextMenu?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onContextMenuCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onCopy?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCopyCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCut?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCutCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onDoubleClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onDoubleClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onDrag?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnd?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEndCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnter?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnterCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragExit?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragExitCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragLeave?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragLeaveCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragOver?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragOverCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragStart?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragStartCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDrop?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDropCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDurationChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onDurationChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEmptied?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEmptiedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEncrypted?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEncryptedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEnded?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEndedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onError?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onErrorCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onFocus?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onFocusCapture?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onGotPointerCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onGotPointerCaptureCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onInput?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInputCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInvalid?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInvalidCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onKeyDown?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyDownCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyPress?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyPressCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyUp?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyUpCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onLoad?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedData?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedDataCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedMetadata?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedMetadataCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadStart?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadStartCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLostPointerCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onLostPointerCaptureCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onMouseDown?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseDownCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseEnter?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseLeave?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseMove?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseMoveCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOut?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOutCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOver?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOverCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseUp?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseUpCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onPaste?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onPasteCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onPause?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPauseCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlay?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlayCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlaying?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlayingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPointerCancel?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerCancelCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerDown?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerDownCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerEnter?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerLeave?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerMove?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerMoveCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOut?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOutCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOver?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOverCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerUp?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerUpCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onProgress?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onProgressCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onRateChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onRateChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onReset?`: `FormEventHandler`\<`HTMLFormElement`\>; `onResetCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onScroll?`: `UIEventHandler`\<`HTMLFormElement`\>; `onScrollCapture?`: `UIEventHandler`\<`HTMLFormElement`\>; `onSeeked?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeekedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeeking?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeekingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSelect?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSelectCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onStalled?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onStalledCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSubmitCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onSuspend?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSuspendCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTimeUpdate?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTimeUpdateCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTouchCancel?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchCancelCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchEnd?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchEndCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchMove?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchMoveCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchStart?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchStartCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTransitionEnd?`: `TransitionEventHandler`\<`HTMLFormElement`\>; `onTransitionEndCapture?`: `TransitionEventHandler`\<`HTMLFormElement`\>; `onVolumeChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onVolumeChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWaiting?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWaitingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWheel?`: `WheelEventHandler`\<`HTMLFormElement`\>; `onWheelCapture?`: `WheelEventHandler`\<`HTMLFormElement`\>; `part?`: `string`; `prefix?`: `string`; `property?`: `string`; `radioGroup?`: `string`; `rel?`: `string`; `resource?`: `string`; `results?`: `number`; `rev?`: `string`; `role?`: `AriaRole`; `security?`: `string`; `slot?`: `string`; `spellCheck?`: `Booleanish`; `style?`: `CSSProperties`; `suppressContentEditableWarning?`: `boolean`; `suppressHydrationWarning?`: `boolean`; `tabIndex?`: `number`; `target?`: `string`; `title?`: `string`; `translate?`: `"no"` \| `"yes"`; `typeof?`: `string`; `unselectable?`: `"off"` \| `"on"`; `vocab?`: `string`; \} | The properties for the OrySettingsFormSection component. | | `props.about?` | `string` | - | | `props.acceptCharset?` | `string` | - | | `props.accessKey?` | `string` | - | | `props.aria-activedescendant?` | `string` | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. | | `props.aria-atomic?` | `Booleanish` | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. | -| `props.aria-autocomplete?` | `"inline"` \| `"list"` \| `"none"` \| `"both"` | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. | +| `props.aria-autocomplete?` | `"none"` \| `"inline"` \| `"list"` \| `"both"` | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. | | `props.aria-braillelabel?` | `string` | Defines a string value that labels the current element, which is intended to be converted into Braille. **See** aria-label. | | `props.aria-brailleroledescription?` | `string` | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. **See** aria-roledescription. | | `props.aria-busy?` | `Booleanish` | - | @@ -332,17 +332,17 @@ Can be used independently to render a form section with Ory nodes. | `props.aria-colindextext?` | `string` | Defines a human readable text alternative of aria-colindex. **See** aria-rowindextext. | | `props.aria-colspan?` | `number` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. **See** - aria-colindex - aria-rowspan. | | `props.aria-controls?` | `string` | Identifies the element (or elements) whose contents or presence are controlled by the current element. **See** aria-owns. | -| `props.aria-current?` | `boolean` \| `"true"` \| `"false"` \| `"time"` \| `"date"` \| `"page"` \| `"step"` \| `"location"` | Indicates the element that represents the current item within a container or set of related elements. | +| `props.aria-current?` | `boolean` \| `"time"` \| `"date"` \| `"true"` \| `"false"` \| `"page"` \| `"step"` \| `"location"` | Indicates the element that represents the current item within a container or set of related elements. | | `props.aria-describedby?` | `string` | Identifies the element (or elements) that describes the object. **See** aria-labelledby | | `props.aria-description?` | `string` | Defines a string value that describes or annotates the current element. **See** related aria-describedby. | | `props.aria-details?` | `string` | Identifies the element that provides a detailed, extended description for the object. **See** aria-describedby. | | `props.aria-disabled?` | `Booleanish` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. **See** - aria-hidden - aria-readonly. | -| `props.aria-dropeffect?` | `"copy"` \| `"link"` \| `"none"` \| `"execute"` \| `"move"` \| `"popup"` | Indicates what functions can be performed when a dragged object is released on the drop target. **Deprecated** in ARIA 1.1 | +| `props.aria-dropeffect?` | `"none"` \| `"copy"` \| `"link"` \| `"execute"` \| `"move"` \| `"popup"` | Indicates what functions can be performed when a dragged object is released on the drop target. **Deprecated** in ARIA 1.1 | | `props.aria-errormessage?` | `string` | Identifies the element that provides an error message for the object. **See** - aria-invalid - aria-describedby. | | `props.aria-expanded?` | `Booleanish` | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. | | `props.aria-flowto?` | `string` | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. | | `props.aria-grabbed?` | `Booleanish` | Indicates an element's "grabbed" state in a drag-and-drop operation. **Deprecated** in ARIA 1.1 | -| `props.aria-haspopup?` | \| `boolean` \| `"true"` \| `"false"` \| `"dialog"` \| `"grid"` \| `"listbox"` \| `"menu"` \| `"tree"` | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. | +| `props.aria-haspopup?` | \| `boolean` \| `"dialog"` \| `"menu"` \| `"true"` \| `"false"` \| `"grid"` \| `"listbox"` \| `"tree"` | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. | | `props.aria-hidden?` | `Booleanish` | Indicates whether the element is exposed to an accessibility API. **See** aria-disabled. | | `props.aria-invalid?` | `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` | Indicates the entered value does not conform to the format expected by the application. **See** aria-errormessage. | | `props.aria-keyshortcuts?` | `string` | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. | @@ -373,7 +373,7 @@ Can be used independently to render a form section with Ory nodes. | `props.aria-valuemin?` | `number` | Defines the minimum allowed value for a range widget. | | `props.aria-valuenow?` | `number` | Defines the current value for a range widget. **See** aria-valuetext. | | `props.aria-valuetext?` | `string` | Defines the human readable text alternative of aria-valuenow for a range widget. | -| `props.autoCapitalize?` | \| `string` & \{ \} \| `"none"` \| `"off"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` | - | +| `props.autoCapitalize?` | \| `"none"` \| `string` & \{ \} \| `"off"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` | - | | `props.autoComplete?` | `string` | - | | `props.autoCorrect?` | `string` | - | | `props.autoFocus?` | `boolean` | - | @@ -397,7 +397,7 @@ Can be used independently to render a form section with Ory nodes. | `props.hidden?` | `boolean` | - | | `props.id?` | `string` | - | | `props.inlist?` | `any` | - | -| `props.inputMode?` | \| `"text"` \| `"search"` \| `"none"` \| `"email"` \| `"tel"` \| `"url"` \| `"numeric"` \| `"decimal"` | Hints at the type of data that might be entered by the user while editing the element or its contents **See** [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) | +| `props.inputMode?` | \| `"none"` \| `"text"` \| `"search"` \| `"email"` \| `"tel"` \| `"url"` \| `"numeric"` \| `"decimal"` | Hints at the type of data that might be entered by the user while editing the element or its contents **See** [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) | | `props.is?` | `string` | Specify that a standard HTML element should behave like a defined custom built-in element **See** [https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is](https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is) | | `props.itemID?` | `string` | - | | `props.itemProp?` | `string` | - | diff --git a/docs/elements/reference/@ory/elements-react/functions/isUiNodeAnchor.md b/docs/elements/reference/@ory/elements-react/functions/isUiNodeAnchor.md new file mode 100644 index 0000000000..075b020839 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/isUiNodeAnchor.md @@ -0,0 +1,15 @@ +# isUiNodeAnchor() + +```ts +function isUiNodeAnchor(node: UiNode): node is UiNodeAnchor +``` + +## Parameters + +| Parameter | Type | +| --------- | -------- | +| `node` | `UiNode` | + +## Returns + +`node is UiNodeAnchor` diff --git a/docs/elements/reference/@ory/elements-react/functions/isUiNodeDiv.md b/docs/elements/reference/@ory/elements-react/functions/isUiNodeDiv.md new file mode 100644 index 0000000000..eab88e5b7c --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/isUiNodeDiv.md @@ -0,0 +1,15 @@ +# isUiNodeDiv() + +```ts +function isUiNodeDiv(node: UiNode): node is UiNodeDiv +``` + +## Parameters + +| Parameter | Type | +| --------- | -------- | +| `node` | `UiNode` | + +## Returns + +`node is UiNodeDiv` diff --git a/docs/elements/reference/@ory/elements-react/functions/isUiNodeImage.md b/docs/elements/reference/@ory/elements-react/functions/isUiNodeImage.md new file mode 100644 index 0000000000..b640da48d3 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/isUiNodeImage.md @@ -0,0 +1,15 @@ +# isUiNodeImage() + +```ts +function isUiNodeImage(node: UiNode): node is UiNodeImage +``` + +## Parameters + +| Parameter | Type | +| --------- | -------- | +| `node` | `UiNode` | + +## Returns + +`node is UiNodeImage` diff --git a/docs/elements/reference/@ory/elements-react/functions/isUiNodeInput.md b/docs/elements/reference/@ory/elements-react/functions/isUiNodeInput.md new file mode 100644 index 0000000000..ba73ef8e04 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/isUiNodeInput.md @@ -0,0 +1,15 @@ +# isUiNodeInput() + +```ts +function isUiNodeInput(node: UiNode): node is UiNodeInput +``` + +## Parameters + +| Parameter | Type | +| --------- | -------- | +| `node` | `UiNode` | + +## Returns + +`node is UiNodeInput` diff --git a/docs/elements/reference/@ory/elements-react/functions/isUiNodeScript.md b/docs/elements/reference/@ory/elements-react/functions/isUiNodeScript.md new file mode 100644 index 0000000000..83b32ec17c --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/isUiNodeScript.md @@ -0,0 +1,15 @@ +# isUiNodeScript() + +```ts +function isUiNodeScript(node: UiNode): node is UiNodeScript +``` + +## Parameters + +| Parameter | Type | +| --------- | -------- | +| `node` | `UiNode` | + +## Returns + +`node is UiNodeScript` diff --git a/docs/elements/reference/@ory/elements-react/functions/isUiNodeText.md b/docs/elements/reference/@ory/elements-react/functions/isUiNodeText.md new file mode 100644 index 0000000000..b2c7477938 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/isUiNodeText.md @@ -0,0 +1,15 @@ +# isUiNodeText() + +```ts +function isUiNodeText(node: UiNode): node is UiNodeText +``` + +## Parameters + +| Parameter | Type | +| --------- | -------- | +| `node` | `UiNode` | + +## Returns + +`node is UiNodeText` diff --git a/docs/elements/reference/@ory/elements-react/functions/resolvePlaceholder.md b/docs/elements/reference/@ory/elements-react/functions/resolvePlaceholder.md new file mode 100644 index 0000000000..f9768a3fef --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/resolvePlaceholder.md @@ -0,0 +1,16 @@ +# resolvePlaceholder() + +```ts +function resolvePlaceholder(text: UiText, intl: IntlShape): string +``` + +## Parameters + +| Parameter | Type | +| --------- | ----------- | +| `text` | `UiText` | +| `intl` | `IntlShape` | + +## Returns + +`string` diff --git a/docs/elements/reference/@ory/elements-react/functions/useResendCode.md b/docs/elements/reference/@ory/elements-react/functions/useResendCode.md new file mode 100644 index 0000000000..a02653350b --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/functions/useResendCode.md @@ -0,0 +1,42 @@ +# useResendCode() + +```ts +function useResendCode(): { + resendCode: () => void + resendCodeNode: undefined | UiNode +} +``` + +useResendCode provides a callback to trigger a code resend in the current flow. + +You may use this hook to implement a "Resend Code" button in your forms. + +If the current flow does not support code resending, `resendCodeNode` will be `undefined` and `resendCode` will be a no-op. + +Example: + +```tsx +const { resendCode, resendCodeNode } = useResendCode(); + +return ( + {resendCodeNode && ( + + )} +) +``` + +## Returns + +```ts +{ + resendCode: () => void; + resendCodeNode: undefined | UiNode; +} +``` + +the callback to trigger a code resend + +| Name | Type | Default value | +| ---------------- | ----------------------- | -------------- | +| `resendCode()` | () => `void` | `handleResend` | +| `resendCodeNode` | `undefined` \| `UiNode` | - | diff --git a/docs/elements/reference/@ory/elements-react/index.mdx b/docs/elements/reference/@ory/elements-react/index.md similarity index 66% rename from docs/elements/reference/@ory/elements-react/index.mdx rename to docs/elements/reference/@ory/elements-react/index.md index 0ebfa42c1f..60926f5af5 100644 --- a/docs/elements/reference/@ory/elements-react/index.mdx +++ b/docs/elements/reference/@ory/elements-react/index.md @@ -1,9 +1,3 @@ ---- -id: index -title: "@ory/elements-react" -sidebar_label: "@ory/elements-react" ---- - # @ory/elements-react This package provides the core functionality for Ory Elements in React. @@ -21,6 +15,7 @@ This package provides the core functionality for Ory Elements in React. - [OryElementsConfiguration](interfaces/OryElementsConfiguration.md) - [OryMessageContentProps](interfaces/OryMessageContentProps.md) - [OryMessageRootProps](interfaces/OryMessageRootProps.md) +- [ProjectConfiguration](interfaces/ProjectConfiguration.md) - [RecoveryFlowContainer](interfaces/RecoveryFlowContainer.md) - [RegistrationFlowContainer](interfaces/RegistrationFlowContainer.md) - [SettingsFlowContainer](interfaces/SettingsFlowContainer.md) @@ -33,6 +28,7 @@ This package provides the core functionality for Ory Elements in React. - [FormStateAction](type-aliases/FormStateAction.md) - [FormValues](type-aliases/FormValues.md) - [IntlConfig](type-aliases/IntlConfig.md) +- [NodeProps](type-aliases/NodeProps.md) - [OnSubmitHandlerProps](type-aliases/OnSubmitHandlerProps.md) - [OryCardAuthMethodListItemProps](type-aliases/OryCardAuthMethodListItemProps.md) - [OryCardContentProps](type-aliases/OryCardContentProps.md) @@ -49,12 +45,19 @@ This package provides the core functionality for Ory Elements in React. - [OryFormSectionFooterProps](type-aliases/OryFormSectionFooterProps.md) - [OryFormSsoRootProps](type-aliases/OryFormSsoRootProps.md) - [OryNodeAnchorProps](type-aliases/OryNodeAnchorProps.md) +- [OryNodeButtonButtonProps](type-aliases/OryNodeButtonButtonProps.md) - [OryNodeButtonProps](type-aliases/OryNodeButtonProps.md) - [OryNodeCaptchaProps](type-aliases/OryNodeCaptchaProps.md) +- [OryNodeCheckboxInputProps](type-aliases/OryNodeCheckboxInputProps.md) +- [OryNodeCheckboxProps](type-aliases/OryNodeCheckboxProps.md) - [OryNodeConsentScopeCheckboxProps](type-aliases/OryNodeConsentScopeCheckboxProps.md) - [OryNodeImageProps](type-aliases/OryNodeImageProps.md) +- [OryNodeInputInputProps](type-aliases/OryNodeInputInputProps.md) - [OryNodeInputProps](type-aliases/OryNodeInputProps.md) - [OryNodeLabelProps](type-aliases/OryNodeLabelProps.md) +- [OryNodeSelectInputProps](type-aliases/OryNodeSelectInputProps.md) +- [OryNodeSelectProps](type-aliases/OryNodeSelectProps.md) +- [OryNodeSettingsButton](type-aliases/OryNodeSettingsButton.md) - [OryNodeSsoButtonProps](type-aliases/OryNodeSsoButtonProps.md) - [OryNodeTextProps](type-aliases/OryNodeTextProps.md) - [OryPageHeaderProps](type-aliases/OryPageHeaderProps.md) @@ -66,13 +69,33 @@ This package provides the core functionality for Ory Elements in React. - [OrySettingsTotpProps](type-aliases/OrySettingsTotpProps.md) - [OrySettingsWebauthnProps](type-aliases/OrySettingsWebauthnProps.md) - [OryToastProps](type-aliases/OryToastProps.md) +- [UiNodeAnchor](type-aliases/UiNodeAnchor.md) +- [UiNodeDiv](type-aliases/UiNodeDiv.md) +- [UiNodeFixed](type-aliases/UiNodeFixed.md) +- [UiNodeImage](type-aliases/UiNodeImage.md) +- [UiNodeInput](type-aliases/UiNodeInput.md) +- [UiNodeInputAttributesOption](type-aliases/UiNodeInputAttributesOption.md) +- [UiNodeInputAttributesWithOptions](type-aliases/UiNodeInputAttributesWithOptions.md) +- [UiNodeScript](type-aliases/UiNodeScript.md) +- [UiNodeText](type-aliases/UiNodeText.md) ## Variables - [OryLocales](variables/OryLocales.md) +## Functions + +- [isUiNodeAnchor](functions/isUiNodeAnchor.md) +- [isUiNodeDiv](functions/isUiNodeDiv.md) +- [isUiNodeImage](functions/isUiNodeImage.md) +- [isUiNodeInput](functions/isUiNodeInput.md) +- [isUiNodeScript](functions/isUiNodeScript.md) +- [isUiNodeText](functions/isUiNodeText.md) +- [resolvePlaceholder](functions/resolvePlaceholder.md) + ## Components +- [Node](variables/Node.md) - [OryCard](functions/OryCard.md) - [OryCardContent](functions/OryCardContent.md) - [OryCardFooter](functions/OryCardFooter.md) @@ -90,14 +113,31 @@ This package provides the core functionality for Ory Elements in React. - [OrySettingsCard](functions/OrySettingsCard.md) - [OrySettingsFormSection](functions/OrySettingsFormSection.md) +## Events + +- [OryConsentSuccessEvent](type-aliases/OryConsentSuccessEvent.md) +- [OryErrorEvent](type-aliases/OryErrorEvent.md) +- [OryErrorHandler](type-aliases/OryErrorHandler.md) +- [OryLoginSuccessEvent](type-aliases/OryLoginSuccessEvent.md) +- [OryRecoverySuccessEvent](type-aliases/OryRecoverySuccessEvent.md) +- [OryRegistrationSuccessEvent](type-aliases/OryRegistrationSuccessEvent.md) +- [OrySettingsSuccessEvent](type-aliases/OrySettingsSuccessEvent.md) +- [OrySuccessEvent](type-aliases/OrySuccessEvent.md) +- [OrySuccessHandler](type-aliases/OrySuccessHandler.md) +- [OryValidationErrorEvent](type-aliases/OryValidationErrorEvent.md) +- [OryValidationErrorHandler](type-aliases/OryValidationErrorHandler.md) +- [OryVerificationSuccessEvent](type-aliases/OryVerificationSuccessEvent.md) + ## Hooks - [useComponents](functions/useComponents.md) - [useNodeSorter](functions/useNodeSorter.md) - [useOryConfiguration](functions/useOryConfiguration.md) - [useOryFlow](functions/useOryFlow.md) +- [useResendCode](functions/useResendCode.md) ## Utilities +- [OryTransientPayload](type-aliases/OryTransientPayload.md) - [messageTestId](functions/messageTestId.md) - [uiTextToFormattedMessage](functions/uiTextToFormattedMessage.md) diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration.md b/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration.md index 5129f265b5..bcc4f9b472 100644 --- a/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration.md +++ b/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration.md @@ -25,7 +25,7 @@ library. The locale is used to determine the language of the UI. The default loc ### project ```ts -project: AccountExperienceConfiguration +project: ProjectConfiguration ``` The configuration for the project. diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryElementsConfiguration.md b/docs/elements/reference/@ory/elements-react/interfaces/OryElementsConfiguration.md index c2a2414a24..f073e5eb7b 100644 --- a/docs/elements/reference/@ory/elements-react/interfaces/OryElementsConfiguration.md +++ b/docs/elements/reference/@ory/elements-react/interfaces/OryElementsConfiguration.md @@ -7,7 +7,7 @@ The Ory Elements configuration object. ### project ```ts -project: AccountExperienceConfiguration +project: ProjectConfiguration ``` The project configuration. This includes the project name, URLs, and other settings for the Ory Elements project. diff --git a/docs/elements/reference/@ory/elements-react/interfaces/ProjectConfiguration.md b/docs/elements/reference/@ory/elements-react/interfaces/ProjectConfiguration.md new file mode 100644 index 0000000000..128e4a97e9 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/interfaces/ProjectConfiguration.md @@ -0,0 +1,168 @@ +# ProjectConfiguration + +The project configuration for Ory Elements. + +This configuration is used to set various URLs and settings for the Ory Elements project. + +## Properties + +### default_redirect_url + +```ts +default_redirect_url: string +``` + +The default redirect URI as configured in the Ory Kratos configuration + +--- + +### error_ui_url + +```ts +error_ui_url: string +``` + +The URL for the error UI. + +--- + +### hide_ory_branding? + +```ts +optional hide_ory_branding: boolean; +``` + +Whether to hide the Ory branding badge on the account experience card. + +Defaults to `false`. Customers on qualifying plans can opt into hiding it. + +--- + +### hide_registration_link? + +```ts +optional hide_registration_link: boolean; +``` + +When true, hides the "Sign up" link on the login card footer even if registration is enabled. Cosmetic only; does not affect the +registration flow itself. Defaults to false. + +--- + +### login_ui_url + +```ts +login_ui_url: string +``` + +The URL for the login UI. + +--- + +### logo_dark_url? + +```ts +optional logo_dark_url: string; +``` + +The URL for the dark logo. + +Currently unused. + +--- + +### logo_light_url? + +```ts +optional logo_light_url: string; +``` + +The URL for the light logo on the auth card. + +--- + +### name + +```ts +name: string +``` + +The name of the project displayed on the auth card. + +--- + +### recovery_enabled + +```ts +recovery_enabled: boolean +``` + +Whether recovery is enabled. + +Used to determine if the "Forgot Password" link is shown on the password input elements. + +--- + +### recovery_ui_url + +```ts +recovery_ui_url: string +``` + +The URL for the recovery UI. + +--- + +### registration_enabled + +```ts +registration_enabled: boolean +``` + +Whether registration is enabled. + +Used to determine if the "Sign Up" link is shown on the login card. + +--- + +### registration_ui_url + +```ts +registration_ui_url: string +``` + +The URL for the registration UI. + +--- + +### settings_ui_url + +```ts +settings_ui_url: string +``` + +The URL for the settings UI. + +--- + +### verification_enabled + +```ts +verification_enabled: boolean +``` + +Whether verification is enabled. + +Currently unused. + +--- + +### verification_ui_url + +```ts +verification_ui_url: string +``` + +The URL for the verification UI. + +Currently unused. diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Consent.md b/docs/elements/reference/@ory/elements-react/theme/functions/Consent.md index 82203c6aec..8c57e53048 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/Consent.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/Consent.md @@ -8,6 +8,8 @@ function Consent(props: { consentChallenge: OAuth2ConsentRequest csrfToken: string formActionUrl: string + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler session: Session }): Element ``` @@ -19,16 +21,18 @@ object, the session object, the Ory client configuration, a CSRF token, and the ## Parameters -| Parameter | Type | Description | -| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `consentChallenge`: `OAuth2ConsentRequest`; `csrfToken`: `string`; `formActionUrl`: `string`; `session`: `Session`; \} | The props for the Consent component. | -| `props.children?` | `ReactNode` | Optional children to render inside the Consent component. If not provided, the default OryConsentCard will be rendered. | -| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | The components to override the default ones. This allows you to customize the appearance and behavior of the consent flow. | -| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL | -| `props.consentChallenge` | `OAuth2ConsentRequest` | The OAuth2 consent request object. | -| `props.csrfToken` | `string` | The CSRF token to protect against CSRF attacks. This token is used to prevent cross-site request forgery attacks by ensuring that the request is coming from the same origin as the consent flow. | -| `props.formActionUrl` | `string` | The URL to submit the consent form to. This URL is typically an endpoint on the server that handles the consent request. Make sure that this endpoint handles CSRF protection. During the form submission the Consent component will send along the CSRF token passed in the props. The server should validate this token before processing the consent request. | -| `props.session` | `Session` | The session object. Since the consent flow is used in the context of a logged-in user, the session object is required. It contains information about the user, such as their ID and any associated metadata. This information is used to accept or reject the consent request based on the user's preferences. The session object is typically obtained from the Ory Kratos session API. | +| Parameter | Type | Description | +| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `consentChallenge`: `OAuth2ConsentRequest`; `csrfToken`: `string`; `formActionUrl`: `string`; `onError?`: [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md); `onSuccess?`: [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md); `session`: `Session`; \} | The props for the Consent component. | +| `props.children?` | `ReactNode` | Optional children to render inside the Consent component. If not provided, the default OryConsentCard will be rendered. | +| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | The components to override the default ones. This allows you to customize the appearance and behavior of the consent flow. | +| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL | +| `props.consentChallenge` | `OAuth2ConsentRequest` | The OAuth2 consent request object. | +| `props.csrfToken` | `string` | The CSRF token to protect against CSRF attacks. This token is used to prevent cross-site request forgery attacks by ensuring that the request is coming from the same origin as the consent flow. | +| `props.formActionUrl` | `string` | The URL to submit the consent form to. This URL is typically an endpoint on the server that handles the consent request. Make sure that this endpoint handles CSRF protection. During the form submission the Consent component will send along the CSRF token passed in the props. The server should validate this token before processing the consent request. | +| `props.onError?` | [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md) | Optional callback invoked on consent errors. **See** [OryErrorHandler](../../type-aliases/OryErrorHandler.md) | +| `props.onSuccess?` | [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md) | Optional callback invoked on successful consent submission. **See** [OrySuccessHandler](../../type-aliases/OrySuccessHandler.md) | +| `props.session` | `Session` | The session object. Since the consent flow is used in the context of a logged-in user, the session object is required. It contains information about the user, such as their ID and any associated metadata. This information is used to accept or reject the consent request based on the user's preferences. The session object is typically obtained from the Ory Kratos session API. | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultButtonSocial.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultButtonSocial.md index 9a93d5f0d6..0d073df834 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultButtonSocial.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultButtonSocial.md @@ -3,10 +3,11 @@ ```ts function DefaultButtonSocial(props: { attributes: UiNodeInputAttributes + buttonProps: OryNodeButtonButtonProps + isSubmitting: boolean logos?: Record - node: UiNode - onClick?: () => void - showLabel?: boolean + node: UiNodeInput + provider: string }): Element ``` @@ -14,14 +15,15 @@ The default implementation of a social button for Ory SSO. It renders a button w ## Parameters -| Parameter | Type | Description | -| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `attributes`: `UiNodeInputAttributes`; `logos?`: `Record`\<`string`, `ElementType`\>; `node`: `UiNode`; `onClick?`: () => `void`; `showLabel?`: `boolean`; \} | The props for the DefaultButtonSocial component. | -| `props.attributes` | `UiNodeInputAttributes` | - | -| `props.logos?` | `Record`\<`string`, `ElementType`\> | Logos to use for the social buttons. If not provided, the default logos will be used. | -| `props.node` | `UiNode` | - | -| `props.onClick?` | () => `void` | - | -| `props.showLabel?` | `boolean` | Whether to show the label next to the logo. If not provided, it will be determined based on the number of SSO nodes. | +| Parameter | Type | Description | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | +| `props` | \{ `attributes`: `UiNodeInputAttributes`; `buttonProps`: [`OryNodeButtonButtonProps`](../../type-aliases/OryNodeButtonButtonProps.md); `isSubmitting`: `boolean`; `logos?`: `Record`\<`string`, `ElementType`\>; `node`: [`UiNodeInput`](../../type-aliases/UiNodeInput.md); `provider`: `string`; \} | The props for the DefaultButtonSocial component. | +| `props.attributes` | `UiNodeInputAttributes` | **Deprecated** Use node.attributes instead. | +| `props.buttonProps` | [`OryNodeButtonButtonProps`](../../type-aliases/OryNodeButtonButtonProps.md) | - | +| `props.isSubmitting` | `boolean` | - | +| `props.logos?` | `Record`\<`string`, `ElementType`\> | Logos to use for the social buttons. If not provided, the default logos will be used. | +| `props.node` | [`UiNodeInput`](../../type-aliases/UiNodeInput.md) | - | +| `props.provider` | `string` | - | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCard.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCard.md index ad527867fe..24a6bf28f2 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCard.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCard.md @@ -1,17 +1,20 @@ # `` ```ts -function DefaultCard(props: { children?: ReactNode }): Element +function DefaultCard( + props: { + children?: ReactNode + } & Omit, HTMLDivElement>, "ref">, +): Element ``` The DefaultCard component is a styled container that serves as the main card layout for Ory Elements. ## Parameters -| Parameter | Type | Description | -| ----------------- | ------------------------------- | --------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; \} | The properties for the DefaultCard component. | -| `props.children?` | `ReactNode` | - | +| Parameter | Type | Description | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; \} & `Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>, `"ref"`\> | The properties for the DefaultCard component. | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Error.md b/docs/elements/reference/@ory/elements-react/theme/functions/Error.md index ec8ae35c69..c8c20f4ddd 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/Error.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/Error.md @@ -5,14 +5,20 @@ function Error(props: { components?: OryFlowComponentOverrides config: OryClientConfiguration error: - | FlowError - | { + | ({ + correlationId?: string + } & FlowError) + | ({ + correlationId?: string + } & { error: string error_description: string - } - | { + }) + | ({ + correlationId?: string + } & { error: GenericError - } + }) session?: Session }): Element ``` @@ -21,13 +27,13 @@ The Error component is used to display an error message to the user. ## Parameters -| Parameter | Type | Description | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `error`: \| `FlowError` \| \{ `error`: `string`; `error_description`: `string`; \} \| \{ `error`: `GenericError`; \}; `session?`: `Session`; \} | The props for the Error component. | -| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | The components to override the default ones. This allows you to customize the appearance and behavior of the error flow. | -| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and project information. | -| `props.error` | \| `FlowError` \| \{ `error`: `string`; `error_description`: `string`; \} \| \{ `error`: `GenericError`; \} | The error object returned by the Ory SDK. This can be a FlowError, OAuth2Error, or a GenericError. | -| `props.session?` | `Session` | The session object, if available. This is used to determine if the user is logged in and to provide appropriate actions. | +| Parameter | Type | Description | +| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| `props` | \{ `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `error`: \| \{ `correlationId?`: `string`; \} & `FlowError` \| \{ `correlationId?`: `string`; \} & \{ `error`: `string`; `error_description`: `string`; \} \| \{ `correlationId?`: `string`; \} & \{ `error`: `GenericError`; \}; `session?`: `Session`; \} | The props for the Error component. | +| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | The components to override the default ones. This allows you to customize the appearance and behavior of the error flow. | +| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and project information. | +| `props.error` | \| \{ `correlationId?`: `string`; \} & `FlowError` \| \{ `correlationId?`: `string`; \} & \{ `error`: `string`; `error_description`: `string`; \} \| \{ `correlationId?`: `string`; \} & \{ `error`: `GenericError`; \} | The error object returned by the Ory SDK. This can be a FlowError, OAuth2Error, or a GenericError. | +| `props.session?` | `Session` | The session object, if available. This is used to determine if the user is logged in and to provide appropriate actions. | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Login.md b/docs/elements/reference/@ory/elements-react/theme/functions/Login.md index 3c8c295f44..5ad28e55a8 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/Login.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/Login.md @@ -6,6 +6,10 @@ function Login(props: { components?: OryFlowComponentOverrides config: OryClientConfiguration flow: LoginFlow + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler + transientPayload?: OryTransientPayload }): Element ``` @@ -16,13 +20,17 @@ login form. ## Parameters -| Parameter | Type | Description | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `LoginFlow`; \} | The props for the Login component. | -| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | -| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the login flow. | -| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | -| `props.flow` | `LoginFlow` | The login flow object containing the state and data for the login process. | +| Parameter | Type | Description | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `LoginFlow`; `onError?`: [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md); `onSuccess?`: [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md); `onValidationError?`: [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md); `transientPayload?`: [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md); \} | The props for the Login component. | +| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | +| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the login flow. | +| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | +| `props.flow` | `LoginFlow` | The login flow object containing the state and data for the login process. | +| `props.onError?` | [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md) | Optional callback invoked on flow-level errors. **See** [OryErrorHandler](../../type-aliases/OryErrorHandler.md) | +| `props.onSuccess?` | [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md) | Optional callback invoked on successful flow completion. **See** [OrySuccessHandler](../../type-aliases/OrySuccessHandler.md) | +| `props.onValidationError?` | [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md) | Optional callback invoked when the flow returns validation errors. **See** [OryValidationErrorHandler](../../type-aliases/OryValidationErrorHandler.md) | +| `props.transientPayload?` | [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md) | Optional transient payload to include in flow submissions. Accepts a static object or a function that receives form values at submission time and returns the payload. **See** [OryTransientPayload](../../type-aliases/OryTransientPayload.md) | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Recovery.md b/docs/elements/reference/@ory/elements-react/theme/functions/Recovery.md index 43e27dd234..ba016f4ad6 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/Recovery.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/Recovery.md @@ -6,6 +6,10 @@ function Recovery(props: { components?: OryFlowComponentOverrides config: OryClientConfiguration flow: RecoveryFlow + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler + transientPayload?: OryTransientPayload }): Element ``` @@ -13,13 +17,17 @@ The `Recovery` component is used to render the recovery flow in Ory Elements. ## Parameters -| Parameter | Type | Description | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `RecoveryFlow`; \} | The props for the Recovery component. | -| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | -| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the recovery flow. | -| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | -| `props.flow` | `RecoveryFlow` | The recovery flow object containing the state and data for the recovery process. | +| Parameter | Type | Description | +| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `RecoveryFlow`; `onError?`: [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md); `onSuccess?`: [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md); `onValidationError?`: [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md); `transientPayload?`: [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md); \} | The props for the Recovery component. | +| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | +| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the recovery flow. | +| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | +| `props.flow` | `RecoveryFlow` | The recovery flow object containing the state and data for the recovery process. | +| `props.onError?` | [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md) | Optional callback invoked on flow-level errors. **See** [OryErrorHandler](../../type-aliases/OryErrorHandler.md) | +| `props.onSuccess?` | [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md) | Optional callback invoked on successful flow completion. **See** [OrySuccessHandler](../../type-aliases/OrySuccessHandler.md) | +| `props.onValidationError?` | [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md) | Optional callback invoked when the flow returns validation errors. **See** [OryValidationErrorHandler](../../type-aliases/OryValidationErrorHandler.md) | +| `props.transientPayload?` | [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md) | Optional transient payload to include in flow submissions. Accepts a static object or a function that receives form values at submission time and returns the payload. **See** [OryTransientPayload](../../type-aliases/OryTransientPayload.md) | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Registration.md b/docs/elements/reference/@ory/elements-react/theme/functions/Registration.md index d76c50296e..8bfd10b3b3 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/Registration.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/Registration.md @@ -6,6 +6,10 @@ function Registration(props: { components?: OryFlowComponentOverrides config: OryClientConfiguration flow: RegistrationFlow + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler + transientPayload?: OryTransientPayload }): Element ``` @@ -13,13 +17,17 @@ The `Registration` component is used to render the registration flow in Ory Elem ## Parameters -| Parameter | Type | Description | -| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `RegistrationFlow`; \} | The props for the Registration component. | -| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | -| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the registration flow. | -| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | -| `props.flow` | `RegistrationFlow` | The registration flow object containing the state and data for the registration process. | +| Parameter | Type | Description | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `RegistrationFlow`; `onError?`: [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md); `onSuccess?`: [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md); `onValidationError?`: [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md); `transientPayload?`: [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md); \} | The props for the Registration component. | +| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | +| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the registration flow. | +| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | +| `props.flow` | `RegistrationFlow` | The registration flow object containing the state and data for the registration process. | +| `props.onError?` | [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md) | Optional callback invoked on flow-level errors. **See** [OryErrorHandler](../../type-aliases/OryErrorHandler.md) | +| `props.onSuccess?` | [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md) | Optional callback invoked on successful flow completion. **See** [OrySuccessHandler](../../type-aliases/OrySuccessHandler.md) | +| `props.onValidationError?` | [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md) | Optional callback invoked when the flow returns validation errors. **See** [OryValidationErrorHandler](../../type-aliases/OryValidationErrorHandler.md) | +| `props.transientPayload?` | [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md) | Optional transient payload to include in flow submissions. Accepts a static object or a function that receives form values at submission time and returns the payload. **See** [OryTransientPayload](../../type-aliases/OryTransientPayload.md) | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Settings.md b/docs/elements/reference/@ory/elements-react/theme/functions/Settings.md index cf4d6457e6..c5b2bef9bc 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/Settings.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/Settings.md @@ -1,12 +1,18 @@ # `` ```ts -function Settings(props: { - children?: ReactNode - components?: OryFlowComponentOverrides - config: OryClientConfiguration - flow: SettingsFlow -}): Element +function Settings( + props: { + children?: ReactNode + components?: OryFlowComponentOverrides + config: OryClientConfiguration + flow: SettingsFlow + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler + transientPayload?: OryTransientPayload + } & Omit, HTMLDivElement>, "ref">, "onError">, +): Element ``` The `Settings` component is used to render the settings flow in Ory Elements. @@ -16,13 +22,9 @@ the settings form. ## Parameters -| Parameter | Type | Description | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `SettingsFlow`; \} | The props for the Settings component. | -| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySettingsCard will be rendered. | -| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the settings flow. | -| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | -| `props.flow` | `SettingsFlow` | The settings flow object containing the state and data for the settings process. | +| Parameter | Type | Description | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `SettingsFlow`; `onError?`: [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md); `onSuccess?`: [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md); `onValidationError?`: [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md); `transientPayload?`: [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md); \} & `Omit`\<`Omit`\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>, `"ref"`\>, `"onError"`\> | The props for the Settings component. | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Verification.md b/docs/elements/reference/@ory/elements-react/theme/functions/Verification.md index 2187241f62..8e0fe68719 100644 --- a/docs/elements/reference/@ory/elements-react/theme/functions/Verification.md +++ b/docs/elements/reference/@ory/elements-react/theme/functions/Verification.md @@ -6,6 +6,10 @@ function Verification(props: { components?: OryFlowComponentOverrides config: OryClientConfiguration flow: VerificationFlow + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler + transientPayload?: OryTransientPayload }): Element ``` @@ -16,13 +20,17 @@ of the verification form. ## Parameters -| Parameter | Type | Description | -| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `VerificationFlow`; \} | The props for the Verification component. | -| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | -| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the verification flow. | -| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | -| `props.flow` | `VerificationFlow` | The verification flow object containing the state and data for the verification process. | +| Parameter | Type | Description | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `VerificationFlow`; `onError?`: [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md); `onSuccess?`: [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md); `onValidationError?`: [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md); `transientPayload?`: [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md); \} | The props for the Verification component. | +| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. | +| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the verification flow. | +| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. | +| `props.flow` | `VerificationFlow` | The verification flow object containing the state and data for the verification process. | +| `props.onError?` | [`OryErrorHandler`](../../type-aliases/OryErrorHandler.md) | Optional callback invoked on flow-level errors. **See** [OryErrorHandler](../../type-aliases/OryErrorHandler.md) | +| `props.onSuccess?` | [`OrySuccessHandler`](../../type-aliases/OrySuccessHandler.md) | Optional callback invoked on successful flow completion. **See** [OrySuccessHandler](../../type-aliases/OrySuccessHandler.md) | +| `props.onValidationError?` | [`OryValidationErrorHandler`](../../type-aliases/OryValidationErrorHandler.md) | Optional callback invoked when the flow returns validation errors. **See** [OryValidationErrorHandler](../../type-aliases/OryValidationErrorHandler.md) | +| `props.transientPayload?` | [`OryTransientPayload`](../../type-aliases/OryTransientPayload.md) | Optional transient payload to include in flow submissions. Accepts a static object or a function that receives form values at submission time and returns the payload. **See** [OryTransientPayload](../../type-aliases/OryTransientPayload.md) | ## Returns diff --git a/docs/elements/reference/@ory/elements-react/theme/index.mdx b/docs/elements/reference/@ory/elements-react/theme/index.md similarity index 92% rename from docs/elements/reference/@ory/elements-react/theme/index.mdx rename to docs/elements/reference/@ory/elements-react/theme/index.md index 101411b185..46039ad022 100644 --- a/docs/elements/reference/@ory/elements-react/theme/index.mdx +++ b/docs/elements/reference/@ory/elements-react/theme/index.md @@ -1,9 +1,3 @@ ---- -id: index -title: "@ory/elements-react/theme" -sidebar_label: "theme" ---- - # @ory/elements-react/theme This package provides the default theme for Ory Elements React. diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/FlowContextValue.md b/docs/elements/reference/@ory/elements-react/type-aliases/FlowContextValue.md index 3dbdb25716..a363209de8 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/FlowContextValue.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/FlowContextValue.md @@ -4,7 +4,11 @@ type FlowContextValue = OryFlowContainer & { dispatchFormState: Dispatch formState: FormState + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler setFlowContainer: FlowContainerSetter + transientPayload?: OryTransientPayload } ``` @@ -12,8 +16,12 @@ The return value of the OryFlowContext. ## Type declaration -| Name | Type | Description | -| ------------------- | ------------------------------------------------------------- | ------------------------------------------- | -| `dispatchFormState` | `Dispatch`\<[`FormStateAction`](FormStateAction.md)\> | Dispatch function to update the form state. | -| `formState` | [`FormState`](FormState.md) | The current form state. **See** FormState | -| `setFlowContainer` | [`FlowContainerSetter`](../interfaces/FlowContainerSetter.md) | Function to set the flow container. | +| Name | Type | Description | +| -------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------ | +| `dispatchFormState` | `Dispatch`\<[`FormStateAction`](FormStateAction.md)\> | Dispatch function to update the form state. | +| `formState` | [`FormState`](FormState.md) | The current form state. **See** FormState | +| `onError?` | [`OryErrorHandler`](OryErrorHandler.md) | Optional callback invoked when a flow error occurs. | +| `onSuccess?` | [`OrySuccessHandler`](OrySuccessHandler.md) | Optional callback invoked on successful flow completion. | +| `onValidationError?` | [`OryValidationErrorHandler`](OryValidationErrorHandler.md) | Optional callback invoked when the flow returns validation errors. | +| `setFlowContainer` | [`FlowContainerSetter`](../interfaces/FlowContainerSetter.md) | Function to set the flow container. | +| `transientPayload?` | [`OryTransientPayload`](OryTransientPayload.md) | Optional transient payload to include in flow submissions. | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/FormState.md b/docs/elements/reference/@ory/elements-react/type-aliases/FormState.md index b55b4a0134..25dc2e1e63 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/FormState.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/FormState.md @@ -1,23 +1,7 @@ # FormState ```ts -type FormState = - | { - current: "select_method" - } - | { - current: "provide_identifier" - } - | { - current: "method_active" - method: UiNodeGroupEnum - } - | { - current: "success_screen" - } - | { - current: "settings" - } +type FormState = FlowFormState & CommonFormStateProperties ``` Represents the state of the form based on the flow type and active method. This type is used to determine which part of the form @@ -30,3 +14,8 @@ It can be one of the following: - `method_active`: An authentication method is active, and the user is interacting with it. - `success_screen`: The flow has successfully completed (only used in the verification flow). - `settings`: The user is in the settings flow. + +In addition, it includes a common properties: + +- `isSubmitting`: A boolean indicating whether the form is currently being submitted. +- `isReady`: A boolean indicating whether the form is ready. diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/FormStateAction.md b/docs/elements/reference/@ory/elements-react/type-aliases/FormStateAction.md index e24c2f2d5f..a098df7525 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/FormStateAction.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/FormStateAction.md @@ -13,6 +13,23 @@ type FormStateAction = | { type: "action_clear_active_method" } + | { + group: UiNodeGroupEnum + type: "form_input_loading" + } + | { + input: UiNodeGroupEnum + type: "form_input_ready" + } + | { + type: "form_submit_start" + } + | { + type: "form_submit_end" + } + | { + type: "page_redirect" + } ``` Represents the actions that can be dispatched to update the form state. These actions are used to change the current state of the @@ -53,3 +70,57 @@ form based on user interactions or flow updates. | Name | Type | Description | | ------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type` | `"action_clear_active_method"` | Action to clear the active authentication method. This action is dispatched when the user wants to clear the currently active method and return to the method selection state. | + +```ts +{ + group: UiNodeGroupEnum + type: "form_input_loading" +} +``` + +| Name | Type | Description | +| ------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `group` | `UiNodeGroupEnum` | The input group that is loading. | +| `type` | `"form_input_loading"` | Action to indicate that an input group is loading. This action is dispatched when the specified input is in the process of loading, and it sets the form state to not ready. | + +```ts +{ + input: UiNodeGroupEnum + type: "form_input_ready" +} +``` + +| Name | Type | Description | +| ------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `input` | `UiNodeGroupEnum` | The input group that is ready. | +| `type` | `"form_input_ready"` | Action to indicate that the input group is ready. This action is dispatched when the specified input has finished loading, and it sets the form state to ready. | + +```ts +{ + type: "form_submit_start" +} +``` + +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `type` | `"form_submit_start"` | Action to indicate the start of a form submission. This action is dispatched when the user submits the form, and it sets the submitting state to true. | + +```ts +{ + type: "form_submit_end" +} +``` + +| Name | Type | Description | +| ------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `type` | `"form_submit_end"` | Action to indicate the end of a form submission. This action is dispatched when the form submission is complete, and it sets the submitting state to false. | + +```ts +{ + type: "page_redirect" +} +``` + +| Name | Type | Description | +| ------ | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `type` | `"page_redirect"` | Action to indicate that a page redirect is occurring. This action is dispatched when the form submission results in a page redirect (usually after a successful login, etc. to redirect to the main application's URL), and it keeps the submitting state as true, as the next action is a full page unload. This is necessary, to keep submit buttons in a submitting state while the redirect is in progress, to prevent the user accidentally interacting with the page while it's redirecting causing UX issues. | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/NodeProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/NodeProps.md new file mode 100644 index 0000000000..8d330632e8 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/NodeProps.md @@ -0,0 +1,15 @@ +# NodeProps + +```ts +type NodeProps = { + node: UiNode +} +``` + +## Properties + +### node + +```ts +node: UiNode +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps.md index 675f3aa566..f5e5c220e4 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps.md @@ -3,7 +3,10 @@ ```ts type OnSubmitHandlerProps = { body: T + onError?: OryErrorHandler onRedirect: OnRedirectHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler setFlowContainer: (flowContainer: OryFlowContainer) => void } ``` @@ -28,6 +31,17 @@ The form values to submit. --- +### onError? + +```ts +optional onError: OryErrorHandler; +``` + +Optional callback invoked on infrastructure or flow-level errors (expired flow, CSRF, not found, replaced). Awaited if it returns +a Promise. + +--- + ### onRedirect ```ts @@ -38,6 +52,27 @@ This method is used to redirect the user to a different page. --- +### onSuccess? + +```ts +optional onSuccess: OrySuccessHandler; +``` + +Optional callback invoked after a successful submission, before the default behavior (redirect, flow update). Awaited if it +returns a Promise. + +--- + +### onValidationError? + +```ts +optional onValidationError: OryValidationErrorHandler; +``` + +Optional callback invoked when the server returns validation errors. Awaited if it returns a Promise. + +--- + ### setFlowContainer() ```ts diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardAuthMethodListItemProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardAuthMethodListItemProps.md index 34c23fda9d..7c19ccc4b8 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardAuthMethodListItemProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardAuthMethodListItemProps.md @@ -2,12 +2,9 @@ ```ts type OryCardAuthMethodListItemProps = { + disabled?: boolean group: string onClick: () => void - title?: { - id: string - values?: Record - } } ``` @@ -15,6 +12,14 @@ Props for the AuthMethodListItem component. This component is used to render a s ## Properties +### disabled? + +```ts +optional disabled: boolean; +``` + +--- + ### group ```ts @@ -32,19 +37,3 @@ onClick: () => void; #### Returns `void` - ---- - -### title? - -```ts -optional title: { - id: string; - values?: Record; -}; -``` - -| Name | Type | -| --------- | ------------------------------ | -| `id` | `string` | -| `values?` | `Record`\<`string`, `string`\> | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryConsentSuccessEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryConsentSuccessEvent.md new file mode 100644 index 0000000000..01f01bfeac --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryConsentSuccessEvent.md @@ -0,0 +1,26 @@ +# OryConsentSuccessEvent + +```ts +type OryConsentSuccessEvent = { + consentRequest: OAuth2ConsentRequest + flowType: FlowType.OAuth2Consent +} +``` + +Event fired after a successful OAuth2 consent submission. + +## Properties + +### consentRequest + +```ts +consentRequest: OAuth2ConsentRequest +``` + +--- + +### flowType + +```ts +flowType: FlowType.OAuth2Consent +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryErrorEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryErrorEvent.md new file mode 100644 index 0000000000..43cb21120e --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryErrorEvent.md @@ -0,0 +1,31 @@ +# OryErrorEvent + +```ts +type OryErrorEvent = + | { + body: SelfServiceFlowExpiredError + flowType: FlowType + type: "flow_expired" + } + | { + body: GenericError + flowType: FlowType + type: "csrf_error" + } + | { + flowType: FlowType + type: "flow_not_found" + } + | { + body: ErrorFlowReplaced + flowType: FlowType + type: "flow_replaced" + } + | { + consentRequest: OAuth2ConsentRequest + flowType: FlowType.OAuth2Consent + type: "consent_error" + } +``` + +Discriminated union of infrastructure/flow error events. Uses SDK error types from `@ory/client-fetch`. diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryErrorHandler.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryErrorHandler.md new file mode 100644 index 0000000000..3481b321e5 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryErrorHandler.md @@ -0,0 +1,17 @@ +# OryErrorHandler() + +```ts +type OryErrorHandler = (event: OryErrorEvent) => void | Promise +``` + +Callback invoked on infrastructure or flow-level errors (expired flow, CSRF violation, flow not found, flow replaced). + +## Parameters + +| Parameter | Type | +| --------- | ----------------------------------- | +| `event` | [`OryErrorEvent`](OryErrorEvent.md) | + +## Returns + +`void` \| `Promise`\<`void`\> diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents.md index a02639d526..3160fa487a 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents.md @@ -34,12 +34,13 @@ type OryFlowComponents = { Anchor: ComponentType Button: ComponentType Captcha: ComponentType - Checkbox: ComponentType + Checkbox: ComponentType CodeInput: ComponentType ConsentScopeCheckbox: ComponentType Image: ComponentType Input: ComponentType Label: ComponentType + Select?: ComponentType SsoButton: ComponentType Text: ComponentType } @@ -137,33 +138,35 @@ Message: { ```ts Node: { - Anchor: ComponentType - Button: ComponentType - Captcha: ComponentType - Checkbox: ComponentType - CodeInput: ComponentType - ConsentScopeCheckbox: ComponentType - Image: ComponentType - Input: ComponentType - Label: ComponentType - SsoButton: ComponentType - Text: ComponentType -} + Anchor: ComponentType; + Button: ComponentType; + Captcha: ComponentType; + Checkbox: ComponentType; + CodeInput: ComponentType; + ConsentScopeCheckbox: ComponentType; + Image: ComponentType; + Input: ComponentType; + Label: ComponentType; + Select?: ComponentType; + SsoButton: ComponentType; + Text: ComponentType; +}; ``` -| Name | Type | Description | -| ---------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `Anchor` | `ComponentType`\<[`OryNodeAnchorProps`](OryNodeAnchorProps.md)\> | Anchor component, rendered whenever an "anchor" node is encountered | -| `Button` | `ComponentType`\<[`OryNodeButtonProps`](OryNodeButtonProps.md)\> | Button component, rendered whenever a button is encountered in the Ory UI Nodes. | -| `Captcha` | `ComponentType`\<[`OryNodeCaptchaProps`](OryNodeCaptchaProps.md)\> | The Captcha component is rendered whenever a "captcha" group is encountered. | -| `Checkbox` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | The Checkbox component is rendered whenever an input node with of boolean type is encountered. | -| `CodeInput` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | Special version of the Input component for OTP codes. | -| `ConsentScopeCheckbox` | `ComponentType`\<[`OryNodeConsentScopeCheckboxProps`](OryNodeConsentScopeCheckboxProps.md)\> | Special version of the Input component for scopes in OAuth2 flows. | -| `Image` | `ComponentType`\<[`OryNodeImageProps`](OryNodeImageProps.md)\> | The Image component is rendered whenever an "image" node is encountered. For example used in the "Logo" node. | -| `Input` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | The Input component is rendered whenever a "input" node is encountered. | -| `Label` | `ComponentType`\<[`OryNodeLabelProps`](OryNodeLabelProps.md)\> | The Label component is rendered around Input components and is used to render form labels. | -| `SsoButton` | `ComponentType`\<[`OryNodeSsoButtonProps`](OryNodeSsoButtonProps.md)\> | The SsoButton component is rendered whenever a button of group "oidc" or "saml" node is encountered. It renders the "Login with Google", "Login with Facebook" etc. buttons. | -| `Text` | `ComponentType`\<[`OryNodeTextProps`](OryNodeTextProps.md)\> | The Text component is rendered whenever a "text" node is encountered. | +| Name | Type | Description | +| ---------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Anchor` | `ComponentType`\<[`OryNodeAnchorProps`](OryNodeAnchorProps.md)\> | Anchor component, rendered whenever an "anchor" node is encountered | +| `Button` | `ComponentType`\<[`OryNodeButtonProps`](OryNodeButtonProps.md)\> | Button component, rendered whenever a button is encountered in the Ory UI Nodes. | +| `Captcha` | `ComponentType`\<[`OryNodeCaptchaProps`](OryNodeCaptchaProps.md)\> | The Captcha component is rendered whenever a "captcha" group is encountered. | +| `Checkbox` | `ComponentType`\<[`OryNodeCheckboxProps`](OryNodeCheckboxProps.md)\> | The Checkbox component is rendered whenever an input node with of boolean type is encountered. | +| `CodeInput` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | Special version of the Input component for OTP codes. | +| `ConsentScopeCheckbox` | `ComponentType`\<[`OryNodeConsentScopeCheckboxProps`](OryNodeConsentScopeCheckboxProps.md)\> | Special version of the Input component for scopes in OAuth2 flows. | +| `Image` | `ComponentType`\<[`OryNodeImageProps`](OryNodeImageProps.md)\> | The Image component is rendered whenever an "image" node is encountered. For example used in the "Logo" node. | +| `Input` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | The Input component is rendered whenever a "input" node is encountered. | +| `Label` | `ComponentType`\<[`OryNodeLabelProps`](OryNodeLabelProps.md)\> | The Label component is rendered around Input components and is used to render form labels. | +| `Select?` | `ComponentType`\<[`OryNodeSelectProps`](OryNodeSelectProps.md)\> | The Select component is rendered whenever an "input" node declares a non-empty `options` list, typically the result of an `enum` constraint in the identity schema. Optional for backward compatibility: when not provided, the dispatch falls back to the regular `Input` renderer so older consumers that constructed `OryFlowComponents` by hand keep compiling and rendering. | +| `SsoButton` | `ComponentType`\<[`OryNodeSsoButtonProps`](OryNodeSsoButtonProps.md)\> | The SsoButton component is rendered whenever a button of group "oidc" or "saml" node is encountered. It renders the "Login with Google", "Login with Facebook" etc. buttons. | +| `Text` | `ComponentType`\<[`OryNodeTextProps`](OryNodeTextProps.md)\> | The Text component is rendered whenever a "text" node is encountered. | --- diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryLoginSuccessEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryLoginSuccessEvent.md new file mode 100644 index 0000000000..8ca72370f9 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryLoginSuccessEvent.md @@ -0,0 +1,47 @@ +# OryLoginSuccessEvent + +```ts +type OryLoginSuccessEvent = { + flow: LoginFlow + flowType: FlowType.Login + method: string + session: Session +} +``` + +Event fired after a successful login, before the redirect. + +`session.identity` contains the authenticated user. Use `session.identity.id` for analytics session stitching (e.g., +`mixpanel.identify`). + +## Properties + +### flow + +```ts +flow: LoginFlow +``` + +--- + +### flowType + +```ts +flowType: FlowType.Login +``` + +--- + +### method + +```ts +method: string +``` + +--- + +### session + +```ts +session: Session +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonButtonProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonButtonProps.md new file mode 100644 index 0000000000..0e3a0011ac --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonButtonProps.md @@ -0,0 +1,61 @@ +# OryNodeButtonButtonProps + +```ts +type OryNodeButtonButtonProps = { + disabled?: boolean + name: string + onClick: (event: any) => void + type: "button" | "submit" | "reset" + value: string | number | readonly string[] | undefined +} +``` + +## Properties + +### disabled? + +```ts +optional disabled: boolean; +``` + +--- + +### name + +```ts +name: string +``` + +--- + +### onClick() + +```ts +onClick: (event: any) => void; +``` + +#### Parameters + +| Parameter | Type | +| --------- | ----- | +| `event` | `any` | + +#### Returns + +`void` + +--- + +### type + +```ts +type: "button" | "submit" | "reset" +``` + +--- + +### value + +```ts +value: string | number | readonly string[] | undefined; +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps.md index ef3fd4d495..b2ed160778 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps.md @@ -3,14 +3,46 @@ ```ts type OryNodeButtonProps = { attributes: UiNodeInputAttributes - node: UiNode -} & Omit, "children"> & - ButtonVariants + buttonProps: OryNodeButtonButtonProps + isSubmitting: boolean + node: UiNodeInput +} ``` -## Type declaration +## Properties -| Name | Type | -| ------------ | ----------------------- | -| `attributes` | `UiNodeInputAttributes` | -| `node` | `UiNode` | +### ~~attributes~~ + +```ts +attributes: UiNodeInputAttributes +``` + +#### Deprecated + +Use node.attributes instead. + +--- + +### buttonProps + +```ts +buttonProps: OryNodeButtonButtonProps +``` + +--- + +### isSubmitting + +```ts +isSubmitting: boolean +``` + +Indicates whether the form is currently being submitted via this button. + +--- + +### node + +```ts +node: UiNodeInput +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxInputProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxInputProps.md new file mode 100644 index 0000000000..eb3f2c0aec --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxInputProps.md @@ -0,0 +1,89 @@ +# OryNodeCheckboxInputProps + +```ts +type OryNodeCheckboxInputProps = { + checked: boolean + disabled?: boolean + name: string + onChange: (event: any) => void + ref: (instance: any) => void + type: "checkbox" + value: string | number | readonly string[] | undefined +} +``` + +## Properties + +### checked + +```ts +checked: boolean +``` + +--- + +### disabled? + +```ts +optional disabled: boolean; +``` + +--- + +### name + +```ts +name: string +``` + +--- + +### onChange() + +```ts +onChange: (event: any) => void; +``` + +#### Parameters + +| Parameter | Type | +| --------- | ----- | +| `event` | `any` | + +#### Returns + +`void` + +--- + +### ref() + +```ts +ref: (instance: any) => void; +``` + +#### Parameters + +| Parameter | Type | +| ---------- | ----- | +| `instance` | `any` | + +#### Returns + +`void` + +--- + +### type + +```ts +type: "checkbox" +``` + +--- + +### value + +```ts +value: string | number | readonly string[] | undefined; +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxProps.md new file mode 100644 index 0000000000..b560d26abe --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxProps.md @@ -0,0 +1,50 @@ +# OryNodeCheckboxProps + +```ts +type OryNodeCheckboxProps = { + attributes: UiNodeInputAttributes + inputProps: OryNodeCheckboxInputProps + node: UiNodeInput + onClick: MouseEventHandler +} +``` + +## Properties + +### ~~attributes~~ + +```ts +attributes: UiNodeInputAttributes +``` + +#### Deprecated + +- use node.attributes + +--- + +### inputProps + +```ts +inputProps: OryNodeCheckboxInputProps +``` + +--- + +### node + +```ts +node: UiNodeInput +``` + +--- + +### ~~onClick~~ + +```ts +onClick: MouseEventHandler +``` + +#### Deprecated + +- use inputProps.onClick diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps.md index 24a6fb84c2..fdd70bf072 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps.md @@ -3,6 +3,12 @@ ```ts type OryNodeConsentScopeCheckboxProps = { attributes: UiNodeInputAttributes + inputProps: { + checked: boolean + disabled?: boolean + name: string + value: string + } node: UiNode onCheckedChange: (checked: boolean) => void } @@ -18,6 +24,26 @@ attributes: UiNodeInputAttributes --- +### inputProps + +```ts +inputProps: { + checked: boolean; + disabled?: boolean; + name: string; + value: string; +}; +``` + +| Name | Type | +| ----------- | --------- | +| `checked` | `boolean` | +| `disabled?` | `boolean` | +| `name` | `string` | +| `value` | `string` | + +--- + ### node ```ts diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps.md index 009c7da93f..15d98f7711 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps.md @@ -3,22 +3,26 @@ ```ts type OryNodeImageProps = { attributes: UiNodeImageAttributes - node: UiNode + node: UiNodeImage } ``` ## Properties -### attributes +### ~~attributes~~ ```ts attributes: UiNodeImageAttributes ``` +#### Deprecated + +Use node.attributes instead. + --- ### node ```ts -node: UiNode +node: UiNodeImage ``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputInputProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputInputProps.md new file mode 100644 index 0000000000..de3b08c828 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputInputProps.md @@ -0,0 +1,138 @@ +# OryNodeInputInputProps + +```ts +type OryNodeInputInputProps = { + autoComplete?: string + disabled?: boolean + id: string + maxLength?: number + name: string + onBlur: () => void + onChange: (event: any) => void + onClick: MouseEventHandler + placeholder: string + ref: (instance: any) => void + type: string + value: string | number | readonly string[] | undefined +} +``` + +## Properties + +### autoComplete? + +```ts +optional autoComplete: string; +``` + +--- + +### disabled? + +```ts +optional disabled: boolean; +``` + +--- + +### id + +```ts +id: string +``` + +--- + +### maxLength? + +```ts +optional maxLength: number; +``` + +--- + +### name + +```ts +name: string +``` + +--- + +### onBlur() + +```ts +onBlur: () => void; +``` + +#### Returns + +`void` + +--- + +### onChange() + +```ts +onChange: (event: any) => void; +``` + +#### Parameters + +| Parameter | Type | +| --------- | ----- | +| `event` | `any` | + +#### Returns + +`void` + +--- + +### onClick + +```ts +onClick: MouseEventHandler +``` + +--- + +### placeholder + +```ts +placeholder: string +``` + +--- + +### ref() + +```ts +ref: (instance: any) => void; +``` + +#### Parameters + +| Parameter | Type | +| ---------- | ----- | +| `instance` | `any` | + +#### Returns + +`void` + +--- + +### type + +```ts +type: string +``` + +--- + +### value + +```ts +value: string | number | readonly string[] | undefined; +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps.md index d11e0ccf42..4a25c4f98e 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps.md @@ -3,31 +3,48 @@ ```ts type OryNodeInputProps = { attributes: UiNodeInputAttributes - node: UiNode + inputProps: OryNodeInputInputProps + node: UiNodeInput onClick?: MouseEventHandler } ``` ## Properties -### attributes +### ~~attributes~~ ```ts attributes: UiNodeInputAttributes ``` +#### Deprecated + +- use node.attributes + +--- + +### inputProps + +```ts +inputProps: OryNodeInputInputProps +``` + --- ### node ```ts -node: UiNode +node: UiNodeInput ``` --- -### onClick? +### ~~onClick?~~ ```ts optional onClick: MouseEventHandler; ``` + +#### Deprecated + +- use inputProps.onClick diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps.md index 8ec4c27cf1..a8d358bbc1 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps.md @@ -3,13 +3,15 @@ ```ts type OryNodeLabelProps = { attributes: UiNodeInputAttributes - node: UiNode -} & ComponentPropsWithoutRef<"label"> + fieldError?: object + node: UiNodeInput +} & PropsWithChildren ``` ## Type declaration -| Name | Type | -| ------------ | ----------------------- | -| `attributes` | `UiNodeInputAttributes` | -| `node` | `UiNode` | +| Name | Type | Description | +| ------------- | ------------------------------- | ------------------------------------------- | +| `attributes` | `UiNodeInputAttributes` | **Deprecated** Use node.attributes instead. | +| `fieldError?` | `object` | - | +| `node` | [`UiNodeInput`](UiNodeInput.md) | - | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSelectInputProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSelectInputProps.md new file mode 100644 index 0000000000..96713bafea --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSelectInputProps.md @@ -0,0 +1,5 @@ +# OryNodeSelectInputProps + +```ts +type OryNodeSelectInputProps = Omit +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSelectProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSelectProps.md new file mode 100644 index 0000000000..9f0dcd1035 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSelectProps.md @@ -0,0 +1,46 @@ +# OryNodeSelectProps + +```ts +type OryNodeSelectProps = { + attributes: UiNodeInputAttributesWithOptions + inputProps: OryNodeSelectInputProps + node: UiNodeInput + options: UiNodeInputAttributesOption[] +} +``` + +## Properties + +### ~~attributes~~ + +```ts +attributes: UiNodeInputAttributesWithOptions +``` + +#### Deprecated + +- use node.attributes + +--- + +### inputProps + +```ts +inputProps: OryNodeSelectInputProps +``` + +--- + +### node + +```ts +node: UiNodeInput +``` + +--- + +### options + +```ts +options: UiNodeInputAttributesOption[]; +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSettingsButton.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSettingsButton.md new file mode 100644 index 0000000000..227282ddca --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSettingsButton.md @@ -0,0 +1,17 @@ +# OryNodeSettingsButton + +```ts +type OryNodeSettingsButton = { + buttonProps: OryNodeButtonButtonProps + onClick: () => void +} & UiNodeInput +``` + +Props for a button used in the settings flow + +## Type declaration + +| Name | Type | Description | +| ------------- | --------------------------------------------------------- | ---------------------------------------- | +| `buttonProps` | [`OryNodeButtonButtonProps`](OryNodeButtonButtonProps.md) | - | +| `onClick()` | () => `void` | **Deprecated** - use buttonProps.onClick | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps.md index c4b58d211f..ad9dd6878c 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps.md @@ -3,8 +3,10 @@ ```ts type OryNodeSsoButtonProps = { attributes: UiNodeInputAttributes - node: UiNode - onClick?: () => void + buttonProps: OryNodeButtonButtonProps + isSubmitting: boolean + node: UiNodeInput + provider: string } ``` @@ -12,28 +14,44 @@ Props for the OryNodeSsoButton component. ## Properties -### attributes +### ~~attributes~~ ```ts attributes: UiNodeInputAttributes ``` +#### Deprecated + +Use node.attributes instead. + --- -### node +### buttonProps + +```ts +buttonProps: OryNodeButtonButtonProps +``` + +--- + +### isSubmitting ```ts -node: UiNode +isSubmitting: boolean ``` --- -### onClick()? +### node ```ts -optional onClick: () => void; +node: UiNodeInput ``` -#### Returns +--- -`void` +### provider + +```ts +provider: string +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeTextProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeTextProps.md index e1e4f53abb..d464c3f68f 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeTextProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeTextProps.md @@ -3,22 +3,26 @@ ```ts type OryNodeTextProps = { attributes: UiNodeTextAttributes - node: UiNode + node: UiNodeText } ``` ## Properties -### attributes +### ~~attributes~~ ```ts attributes: UiNodeTextAttributes ``` +#### Deprecated + +Use node.attributes instead. + --- ### node ```ts -node: UiNode +node: UiNodeText ``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps.md index a8a78b0d26..f162111378 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps.md @@ -4,6 +4,10 @@ type OryProviderProps = { components: OryFlowComponents config: OryClientConfiguration + onError?: OryErrorHandler + onSuccess?: OrySuccessHandler + onValidationError?: OryValidationErrorHandler + transientPayload?: OryTransientPayload } & OryFlowContainer & PropsWithChildren ``` @@ -12,7 +16,11 @@ Props type for the OryProvider component. ## Type declaration -| Name | Type | Description | -| ------------ | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -| `components` | [`OryFlowComponents`](OryFlowComponents.md) | The components to use for rendering Ory flows. You can provide custom components to override the default Ory components. | -| `config` | [`OryClientConfiguration`](../interfaces/OryClientConfiguration.md) | The Ory client configuration. This includes the SDK and project configuration. | +| Name | Type | Description | +| -------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `components` | [`OryFlowComponents`](OryFlowComponents.md) | The components to use for rendering Ory flows. You can provide custom components to override the default Ory components. | +| `config` | [`OryClientConfiguration`](../interfaces/OryClientConfiguration.md) | The Ory client configuration. This includes the SDK and project configuration. | +| `onError?` | [`OryErrorHandler`](OryErrorHandler.md) | Optional callback invoked when a flow error occurs (expired, security violation, etc.). Use this to track error rates and detect integration issues. **Example** `onError={(event) => { if (event.type === "flow_expired") { analytics.track("flow_expired", { flowType: event.flowType }) } }}` | +| `onSuccess?` | [`OrySuccessHandler`](OrySuccessHandler.md) | Optional callback invoked on successful flow completion. Use this for session stitching and post-authentication analytics. **Example** ` { if (event.flowType === FlowType.Login) { await mixpanel.identify(event.session.identity.id) } }} />` | +| `onValidationError?` | [`OryValidationErrorHandler`](OryValidationErrorHandler.md) | Optional callback invoked when the flow returns validation errors. Use this to track form friction in your analytics pipeline. **Example** `onValidationError={(event) => { analytics.track("validation_error", { flow: event.flow.id }) }}` | +| `transientPayload?` | [`OryTransientPayload`](OryTransientPayload.md) | Optional transient payload to include in all flow submissions. Accepts a static object or a function that receives form values at submission time and returns the payload. Values are merged with any transient payload fields from UI nodes (e.g., captcha), with user-provided values taking priority. **Examples** `` ` ({ signup_method: String(formValues.method ?? "unknown"), })} />` | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryRecoverySuccessEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryRecoverySuccessEvent.md new file mode 100644 index 0000000000..6c083af596 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryRecoverySuccessEvent.md @@ -0,0 +1,38 @@ +# OryRecoverySuccessEvent + +```ts +type OryRecoverySuccessEvent = { + flow: RecoveryFlow + flowType: FlowType.Recovery + method: string +} +``` + +Event fired after a successful recovery submission. + +This fires when the server accepts the recovery form (e.g., a code or email was submitted). The user may still need to complete +additional steps. + +## Properties + +### flow + +```ts +flow: RecoveryFlow +``` + +--- + +### flowType + +```ts +flowType: FlowType.Recovery +``` + +--- + +### method + +```ts +method: string +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryRegistrationSuccessEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryRegistrationSuccessEvent.md new file mode 100644 index 0000000000..d3ecca19c8 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryRegistrationSuccessEvent.md @@ -0,0 +1,53 @@ +# OryRegistrationSuccessEvent + +```ts +type OryRegistrationSuccessEvent = { + flow: RegistrationFlow + flowType: FlowType.Registration + identity: Identity + method: string + session?: Session +} +``` + +Event fired after a successful registration, before the redirect. + +## Properties + +### flow + +```ts +flow: RegistrationFlow +``` + +--- + +### flowType + +```ts +flowType: FlowType.Registration +``` + +--- + +### identity + +```ts +identity: Identity +``` + +--- + +### method + +```ts +method: string +``` + +--- + +### session? + +```ts +optional session: Session; +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsPasskeyProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsPasskeyProps.md index 1fed7f005a..6796dd9a2e 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsPasskeyProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsPasskeyProps.md @@ -2,38 +2,32 @@ ```ts type OrySettingsPasskeyProps = { - removeButtons: UiNode & - { - onClick: () => void - }[] - triggerButton: UiNode & { - onClick: () => void - } + isSubmitting: boolean + removeButtons: OryNodeSettingsButton[] + triggerButton: OryNodeSettingsButton } ``` ## Properties -### removeButtons +### isSubmitting ```ts -removeButtons: UiNode & { - onClick: () => void; -}[]; +isSubmitting: boolean ``` --- -### triggerButton +### removeButtons ```ts -triggerButton: UiNode & { - onClick: () => void; -}; +removeButtons: OryNodeSettingsButton[]; ``` -#### Type declaration +--- + +### triggerButton -| Name | Type | -| ----------- | ------------ | -| `onClick()` | () => `void` | +```ts +triggerButton: OryNodeSettingsButton +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsRecoveryCodesProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsRecoveryCodesProps.md index 4adf772174..21a1b208fc 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsRecoveryCodesProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsRecoveryCodesProps.md @@ -3,10 +3,11 @@ ```ts type OrySettingsRecoveryCodesProps = { codes: string[] + isSubmitting: boolean onRegenerate: () => void onReveal: () => void - regnerateButton: UiNode | undefined - revealButton: UiNode | undefined + regenerateButton: UiNodeInput | undefined + revealButton: UiNodeInput | undefined } ``` @@ -20,6 +21,14 @@ codes: string[]; --- +### isSubmitting + +```ts +isSubmitting: boolean +``` + +--- + ### onRegenerate() ```ts @@ -44,10 +53,10 @@ onReveal: () => void; --- -### regnerateButton +### regenerateButton ```ts -regnerateButton: UiNode | undefined +regenerateButton: UiNodeInput | undefined ``` --- @@ -55,5 +64,5 @@ regnerateButton: UiNode | undefined ### revealButton ```ts -revealButton: UiNode | undefined +revealButton: UiNodeInput | undefined ``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsSsoProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsSsoProps.md index ac3fb6070e..734b8a2af4 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsSsoProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsSsoProps.md @@ -2,25 +2,26 @@ ```ts type OrySettingsSsoProps = { - linkButtons: UiNode & - { - onClick: () => void - }[] - unlinkButtons: UiNode & - { - onClick: () => void - }[] + isSubmitting: boolean + linkButtons: OryNodeSettingsButton[] + unlinkButtons: OryNodeSettingsButton[] } ``` ## Properties +### isSubmitting + +```ts +isSubmitting: boolean +``` + +--- + ### linkButtons ```ts -linkButtons: UiNode & { - onClick: () => void; -}[]; +linkButtons: OryNodeSettingsButton[]; ``` --- @@ -28,7 +29,5 @@ linkButtons: UiNode & { ### unlinkButtons ```ts -unlinkButtons: UiNode & { - onClick: () => void; -}[]; +unlinkButtons: OryNodeSettingsButton[]; ``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsSuccessEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsSuccessEvent.md new file mode 100644 index 0000000000..3dc271150a --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsSuccessEvent.md @@ -0,0 +1,35 @@ +# OrySettingsSuccessEvent + +```ts +type OrySettingsSuccessEvent = { + flow: SettingsFlow + flowType: FlowType.Settings + method: string +} +``` + +Event fired after a successful settings update. + +## Properties + +### flow + +```ts +flow: SettingsFlow +``` + +--- + +### flowType + +```ts +flowType: FlowType.Settings +``` + +--- + +### method + +```ts +method: string +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsTotpProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsTotpProps.md index df09c0adbb..85dd9eee4b 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsTotpProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsTotpProps.md @@ -2,16 +2,25 @@ ```ts type OrySettingsTotpProps = { + isSubmitting: boolean onUnlink: () => void - totpImage: UiNode | undefined - totpInput: UiNode | undefined - totpSecret: UiNode | undefined - totpUnlink: UiNode | undefined + totpImage: UiNodeImage | undefined + totpInput: UiNodeInput | undefined + totpSecret: UiNodeText | undefined + totpUnlink: UiNodeInput | undefined } ``` ## Properties +### isSubmitting + +```ts +isSubmitting: boolean +``` + +--- + ### onUnlink() ```ts @@ -27,7 +36,7 @@ onUnlink: () => void; ### totpImage ```ts -totpImage: UiNode | undefined +totpImage: UiNodeImage | undefined ``` --- @@ -35,7 +44,7 @@ totpImage: UiNode | undefined ### totpInput ```ts -totpInput: UiNode | undefined +totpInput: UiNodeInput | undefined ``` --- @@ -43,7 +52,7 @@ totpInput: UiNode | undefined ### totpSecret ```ts -totpSecret: UiNode | undefined +totpSecret: UiNodeText | undefined ``` --- @@ -51,5 +60,5 @@ totpSecret: UiNode | undefined ### totpUnlink ```ts -totpUnlink: UiNode | undefined +totpUnlink: UiNodeInput | undefined ``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsWebauthnProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsWebauthnProps.md index 2790835bdb..6d9c637741 100644 --- a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsWebauthnProps.md +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsWebauthnProps.md @@ -2,23 +2,27 @@ ```ts type OrySettingsWebauthnProps = { - nameInput: UiNode - removeButtons: UiNode & - { - onClick: () => void - }[] - triggerButton: UiNode & { - onClick: () => void - } + isSubmitting: boolean + nameInput: UiNodeInput + removeButtons: OryNodeSettingsButton[] + triggerButton: OryNodeSettingsButton } ``` ## Properties +### isSubmitting + +```ts +isSubmitting: boolean +``` + +--- + ### nameInput ```ts -nameInput: UiNode +nameInput: UiNodeInput ``` --- @@ -26,9 +30,7 @@ nameInput: UiNode ### removeButtons ```ts -removeButtons: UiNode & { - onClick: () => void; -}[]; +removeButtons: OryNodeSettingsButton[]; ``` --- @@ -36,13 +38,5 @@ removeButtons: UiNode & { ### triggerButton ```ts -triggerButton: UiNode & { - onClick: () => void; -}; +triggerButton: OryNodeSettingsButton ``` - -#### Type declaration - -| Name | Type | -| ----------- | ------------ | -| `onClick()` | () => `void` | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySuccessEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySuccessEvent.md new file mode 100644 index 0000000000..0dc22f110c --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySuccessEvent.md @@ -0,0 +1,23 @@ +# OrySuccessEvent + +```ts +type OrySuccessEvent = + | OryLoginSuccessEvent + | OryRegistrationSuccessEvent + | OryVerificationSuccessEvent + | OryRecoverySuccessEvent + | OrySettingsSuccessEvent + | OryConsentSuccessEvent +``` + +Discriminated union of all success events emitted by Ory Elements. + +Use the `flowType` field to narrow: + +```ts +onSuccess={async (event) => { + if (event.flowType === FlowType.Login) { + await mixpanel.identify(event.session.identity.id) + } +}} +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySuccessHandler.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySuccessHandler.md new file mode 100644 index 0000000000..42beaf7313 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySuccessHandler.md @@ -0,0 +1,18 @@ +# OrySuccessHandler() + +```ts +type OrySuccessHandler = (event: OrySuccessEvent) => void | Promise +``` + +Callback invoked on a successful flow submission. Returning a `Promise` delays the default behavior (redirect, flow update) until +the promise resolves. + +## Parameters + +| Parameter | Type | +| --------- | --------------------------------------- | +| `event` | [`OrySuccessEvent`](OrySuccessEvent.md) | + +## Returns + +`void` \| `Promise`\<`void`\> diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryTransientPayload.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryTransientPayload.md new file mode 100644 index 0000000000..56923a94e9 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryTransientPayload.md @@ -0,0 +1,12 @@ +# OryTransientPayload + +```ts +type OryTransientPayload = + | Record +| (formValues: FormValues) => Record; +``` + +A transient payload value or factory function. + +When a static object, it is included as-is in the submission body. When a function, it receives the current form values at +submission time and must return the transient payload object. diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryValidationErrorEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryValidationErrorEvent.md new file mode 100644 index 0000000000..536888d3b5 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryValidationErrorEvent.md @@ -0,0 +1,28 @@ +# OryValidationErrorEvent + +```ts +type OryValidationErrorEvent = + | { + flow: LoginFlow + flowType: FlowType.Login + } + | { + flow: RegistrationFlow + flowType: FlowType.Registration + } + | { + flow: VerificationFlow + flowType: FlowType.Verification + } + | { + flow: RecoveryFlow + flowType: FlowType.Recovery + } + | { + flow: SettingsFlow + flowType: FlowType.Settings + } +``` + +Discriminated union of validation error events. Each variant carries the updated flow object. Consumers extract messages from +`flow.ui` themselves. diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryValidationErrorHandler.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryValidationErrorHandler.md new file mode 100644 index 0000000000..d79566f506 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryValidationErrorHandler.md @@ -0,0 +1,17 @@ +# OryValidationErrorHandler() + +```ts +type OryValidationErrorHandler = (event: OryValidationErrorEvent) => void | Promise +``` + +Callback invoked when the server returns validation errors for a form submission. + +## Parameters + +| Parameter | Type | +| --------- | ------------------------------------------------------- | +| `event` | [`OryValidationErrorEvent`](OryValidationErrorEvent.md) | + +## Returns + +`void` \| `Promise`\<`void`\> diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryVerificationSuccessEvent.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryVerificationSuccessEvent.md new file mode 100644 index 0000000000..22e965d577 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryVerificationSuccessEvent.md @@ -0,0 +1,38 @@ +# OryVerificationSuccessEvent + +```ts +type OryVerificationSuccessEvent = { + flow: VerificationFlow + flowType: FlowType.Verification + method: string +} +``` + +Event fired after a successful verification submission. + +This fires when the server accepts the verification form (e.g., a code was submitted). It does not necessarily mean the identity +is verified — check the flow state for that. + +## Properties + +### flow + +```ts +flow: VerificationFlow +``` + +--- + +### flowType + +```ts +flowType: FlowType.Verification +``` + +--- + +### method + +```ts +method: string +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeAnchor.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeAnchor.md new file mode 100644 index 0000000000..b9a7ed10b3 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeAnchor.md @@ -0,0 +1,15 @@ +# UiNodeAnchor + +```ts +type UiNodeAnchor = UiNode & { + attributes: UiNodeAnchorAttributes + type: "a" +} +``` + +## Type declaration + +| Name | Type | +| ------------ | ------------------------ | +| `attributes` | `UiNodeAnchorAttributes` | +| `type` | `"a"` | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeDiv.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeDiv.md new file mode 100644 index 0000000000..55ef6aff02 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeDiv.md @@ -0,0 +1,15 @@ +# UiNodeDiv + +```ts +type UiNodeDiv = UiNode & { + attributes: UiNodeDivisionAttributes + type: "div" +} +``` + +## Type declaration + +| Name | Type | +| ------------ | -------------------------- | +| `attributes` | `UiNodeDivisionAttributes` | +| `type` | `"div"` | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeFixed.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeFixed.md new file mode 100644 index 0000000000..3fb47d949a --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeFixed.md @@ -0,0 +1,5 @@ +# UiNodeFixed + +```ts +type UiNodeFixed = UiNodeInput | UiNodeImage | UiNodeAnchor | UiNodeText | UiNodeScript | UiNodeDiv +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeImage.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeImage.md new file mode 100644 index 0000000000..2c5835dff2 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeImage.md @@ -0,0 +1,15 @@ +# UiNodeImage + +```ts +type UiNodeImage = UiNode & { + attributes: UiNodeImageAttributes + type: "img" +} +``` + +## Type declaration + +| Name | Type | +| ------------ | ----------------------- | +| `attributes` | `UiNodeImageAttributes` | +| `type` | `"img"` | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInput.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInput.md new file mode 100644 index 0000000000..6a757dadb3 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInput.md @@ -0,0 +1,15 @@ +# UiNodeInput + +```ts +type UiNodeInput = UiNode & { + attributes: UiNodeInputAttributesWithOptions + type: "input" +} +``` + +## Type declaration + +| Name | Type | +| ------------ | ------------------------------------------------------------------------- | +| `attributes` | [`UiNodeInputAttributesWithOptions`](UiNodeInputAttributesWithOptions.md) | +| `type` | `"input"` | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesOption.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesOption.md new file mode 100644 index 0000000000..c3358474bd --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesOption.md @@ -0,0 +1,19 @@ +# UiNodeInputAttributesOption + +```ts +type UiNodeInputAttributesOption = { + value: unknown +} +``` + +A single selectable value for an input node backed by a JSON schema `enum`. + +TODO: remove this type widening once `@ory/client-fetch` publishes a release that ships `options` on `UiNodeInputAttributes`. + +## Properties + +### value + +```ts +value: unknown +``` diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesWithOptions.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesWithOptions.md new file mode 100644 index 0000000000..d19e505436 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesWithOptions.md @@ -0,0 +1,16 @@ +# UiNodeInputAttributesWithOptions + +```ts +type UiNodeInputAttributesWithOptions = UiNodeInputAttributes & { + options?: UiNodeInputAttributesOption[] +} +``` + +Same as `UiNodeInputAttributes`, but additionally carries the optional `options` field used to render enum traits as a dropdown. +The Kratos server populates this field whenever a JSON schema property declares an `enum`. + +## Type declaration + +| Name | Type | +| ---------- | ----------------------------------------------------------------- | +| `options?` | [`UiNodeInputAttributesOption`](UiNodeInputAttributesOption.md)[] | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeScript.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeScript.md new file mode 100644 index 0000000000..a5b582e739 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeScript.md @@ -0,0 +1,15 @@ +# UiNodeScript + +```ts +type UiNodeScript = UiNode & { + attributes: UiNodeScriptAttributes + type: "script" +} +``` + +## Type declaration + +| Name | Type | +| ------------ | ------------------------ | +| `attributes` | `UiNodeScriptAttributes` | +| `type` | `"script"` | diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeText.md b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeText.md new file mode 100644 index 0000000000..2dfe61d216 --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/type-aliases/UiNodeText.md @@ -0,0 +1,15 @@ +# UiNodeText + +```ts +type UiNodeText = UiNode & { + attributes: UiNodeTextAttributes + type: "text" +} +``` + +## Type declaration + +| Name | Type | +| ------------ | ---------------------- | +| `attributes` | `UiNodeTextAttributes` | +| `type` | `"text"` | diff --git a/docs/elements/reference/@ory/elements-react/variables/Node.md b/docs/elements/reference/@ory/elements-react/variables/Node.md new file mode 100644 index 0000000000..e207de902d --- /dev/null +++ b/docs/elements/reference/@ory/elements-react/variables/Node.md @@ -0,0 +1,41 @@ +# `` + +```ts +const Node: (__namedParameters: NodeProps) => ReactNode & { + Button: (__namedParameters: ButtonRendererProps) => Element + Checkbox: (__namedParameters: CheckboxRendererProps) => Element + ConsentCheckbox: (__namedParameters: { node: UiNodeInput }) => Element + Image: (__namedParameters: ImageRendererProps) => Element + Input: (__namedParameters: TextBasedInputProps) => Element + Select: (__namedParameters: SelectRendererProps) => Element + SsoButton: (__namedParameters: SsoButtonProps) => Element + Text: (__namedParameters: TextRendererProps) => Element +} +``` + +Use this component to render any UiNode. It will automatically pick the correct sub-component based on the node type and use any +custom components provided via the ComponentsContext. + +Make sure to use this component instead of the custom component directly, to make sure it's integrated properly with the form +system. + +## Type declaration + +| Name | Type | Default value | +| ------------------- | -------------------------------------------------------------------------------------------------- | ------------------------- | +| `Button()` | (`__namedParameters`: `ButtonRendererProps`) => `Element` | `ButtonRenderer` | +| `Checkbox()` | (`__namedParameters`: `CheckboxRendererProps`) => `Element` | `CheckboxRenderer` | +| `ConsentCheckbox()` | (`__namedParameters`: \{ `node`: [`UiNodeInput`](../type-aliases/UiNodeInput.md); \}) => `Element` | `ConsentCheckboxRenderer` | +| `Image()` | (`__namedParameters`: `ImageRendererProps`) => `Element` | `ImageRenderer` | +| `Input()` | (`__namedParameters`: `TextBasedInputProps`) => `Element` | `InputRenderer` | +| `Select()` | (`__namedParameters`: `SelectRendererProps`) => `Element` | `SelectRenderer` | +| `SsoButton()` | (`__namedParameters`: `SsoButtonProps`) => `Element` | `SSOButtonRenderer` | +| `Text()` | (`__namedParameters`: `TextRendererProps`) => `Element` | `TextRenderer` | + +## Param + +NodeProps containing the UiNode to render + +## Returns + +A ReactNode rendering the appropriate component for the given UiNode diff --git a/docs/elements/reference/@ory/nextjs/app/functions/getError.md b/docs/elements/reference/@ory/nextjs/app/functions/getError.md new file mode 100644 index 0000000000..b5d2c1c129 --- /dev/null +++ b/docs/elements/reference/@ory/nextjs/app/functions/getError.md @@ -0,0 +1,43 @@ +# getError() + +```ts +function getError(searchParams: QueryParams | Promise): Promise< + | { + error: string + error_description: string + } + | FlowError +> +``` + +Use this method in an app router page to fetch an error from the Ory SDK. This method works with server-side rendering. + +## Parameters + +| Parameter | Type | Description | +| -------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `searchParams` | `QueryParams` \| `Promise`\<`QueryParams`\> | the query params of the request. This can be either the search params from the app router or a promise that resolves to the search params. The promise is useful if you want to fetch the search params from a different source, such as a cookie or a header. | + +## Returns + +`Promise`\< \| \{ `error`: `string`; `error_description`: `string`; \} \| `FlowError`\> + +An object containing the error and error description, or a FlowError object if the error is a flow error. If the error is not a +flow error, the error description will be "An unknown error occurred.". + +## Example + +```tsx +import { Error as ErrorComponent } from "@ory/elements-react/theme" +import "@ory/elements-react/theme/styles.css" +import { getError, getServerSession, OryPageParams } from "@ory/nextjs/app" + +import config from "@/ory.config" + +export default async function ErrorPage(props: OryPageParams) { + const error = await getError(props.searchParams) + const session = await getServerSession().catch(() => null) + + return +} +``` diff --git a/docs/elements/reference/@ory/nextjs/app/index.mdx b/docs/elements/reference/@ory/nextjs/app/index.md similarity index 88% rename from docs/elements/reference/@ory/nextjs/app/index.mdx rename to docs/elements/reference/@ory/nextjs/app/index.md index 80e1b901d8..20f4554eba 100644 --- a/docs/elements/reference/@ory/nextjs/app/index.mdx +++ b/docs/elements/reference/@ory/nextjs/app/index.md @@ -1,9 +1,3 @@ ---- -id: index -title: "@ory/nextjs/app" -sidebar_label: "app" ---- - # @ory/nextjs/app ## Interfaces @@ -12,6 +6,7 @@ sidebar_label: "app" ## Functions +- [getError](functions/getError.md) - [getFlowFactory](functions/getFlowFactory.md) - [getLoginFlow](functions/getLoginFlow.md) - [getLogoutFlow](functions/getLogoutFlow.md) diff --git a/docs/elements/reference/@ory/nextjs/middleware/index.mdx b/docs/elements/reference/@ory/nextjs/middleware/index.md similarity index 55% rename from docs/elements/reference/@ory/nextjs/middleware/index.mdx rename to docs/elements/reference/@ory/nextjs/middleware/index.md index 34efbd55fb..b7b31f1b12 100644 --- a/docs/elements/reference/@ory/nextjs/middleware/index.mdx +++ b/docs/elements/reference/@ory/nextjs/middleware/index.md @@ -1,9 +1,3 @@ ---- -id: index -title: "@ory/nextjs/middleware" -sidebar_label: "middleware" ---- - # @ory/nextjs/middleware ## Functions diff --git a/docs/elements/reference/@ory/nextjs/pages/functions/useError.md b/docs/elements/reference/@ory/nextjs/pages/functions/useError.md new file mode 100644 index 0000000000..7100aa639e --- /dev/null +++ b/docs/elements/reference/@ory/nextjs/pages/functions/useError.md @@ -0,0 +1,47 @@ +# useError() + +```ts +function useError(params: ParsedUrlQuery): null | OryError +``` + +Use this hook in a page to fetch an error from the Ory SDK. This hook works with client-side rendering. + +## Parameters + +| Parameter | Type | Description | +| --------- | ---------------- | -------------------------------------- | +| `params` | `ParsedUrlQuery` | the `router.query` object from Next.js | + +## Returns + +`null` \| `OryError` + +An object containing the error and error description, or a FlowError object if the error is a flow error. If the error is not a +flow error, the error description will be "An unknown error occurred.". + +## Example + +```tsx +import { Error as ErrorComponent } from "@ory/elements-react/theme" +import "@ory/elements-react/theme/styles.css" +import { useRouter } from "next/router" + +import config from "@/ory.config" +import { useError } from "@ory/nextjs/pages" + +export default function ErrorPage() { + const router = useRouter() + + const error = useError(router.query) + + if (!error) { + return null + } + + return ( +
+ +
+ ) +} +``` diff --git a/docs/elements/reference/@ory/nextjs/pages/index.mdx b/docs/elements/reference/@ory/nextjs/pages/index.md similarity index 83% rename from docs/elements/reference/@ory/nextjs/pages/index.mdx rename to docs/elements/reference/@ory/nextjs/pages/index.md index 639238f8fd..edec5660bf 100644 --- a/docs/elements/reference/@ory/nextjs/pages/index.mdx +++ b/docs/elements/reference/@ory/nextjs/pages/index.md @@ -1,11 +1,9 @@ ---- -id: index -title: "@ory/nextjs/pages" -sidebar_label: "pages" ---- - # @ory/nextjs/pages +## Functions + +- [useError](functions/useError.md) + ## Hooks - [useLoginFlow](functions/useLoginFlow.md) diff --git a/docs/elements/reference/typedoc-sidebar.ts b/docs/elements/reference/typedoc-sidebar.ts index e04fb5eeef..8adc18362e 100644 --- a/docs/elements/reference/typedoc-sidebar.ts +++ b/docs/elements/reference/typedoc-sidebar.ts @@ -64,6 +64,11 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/interfaces/OryMessageRootProps", label: "OryMessageRootProps", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/interfaces/ProjectConfiguration", + label: "ProjectConfiguration", + }, { type: "doc", id: "elements/reference/@ory/elements-react/interfaces/RecoveryFlowContainer", @@ -115,6 +120,11 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/type-aliases/IntlConfig", label: "IntlConfig", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/NodeProps", + label: "NodeProps", + }, { type: "doc", id: "elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps", @@ -195,6 +205,11 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/type-aliases/OryNodeAnchorProps", label: "OryNodeAnchorProps", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryNodeButtonButtonProps", + label: "OryNodeButtonButtonProps", + }, { type: "doc", id: "elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps", @@ -205,6 +220,16 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/type-aliases/OryNodeCaptchaProps", label: "OryNodeCaptchaProps", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxInputProps", + label: "OryNodeCheckboxInputProps", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryNodeCheckboxProps", + label: "OryNodeCheckboxProps", + }, { type: "doc", id: "elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps", @@ -215,6 +240,11 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps", label: "OryNodeImageProps", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryNodeInputInputProps", + label: "OryNodeInputInputProps", + }, { type: "doc", id: "elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps", @@ -225,6 +255,21 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps", label: "OryNodeLabelProps", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryNodeSelectInputProps", + label: "OryNodeSelectInputProps", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryNodeSelectProps", + label: "OryNodeSelectProps", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryNodeSettingsButton", + label: "OryNodeSettingsButton", + }, { type: "doc", id: "elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps", @@ -280,6 +325,51 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/type-aliases/OryToastProps", label: "OryToastProps", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeAnchor", + label: "UiNodeAnchor", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeDiv", + label: "UiNodeDiv", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeFixed", + label: "UiNodeFixed", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeImage", + label: "UiNodeImage", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeInput", + label: "UiNodeInput", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesOption", + label: "UiNodeInputAttributesOption", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeInputAttributesWithOptions", + label: "UiNodeInputAttributesWithOptions", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeScript", + label: "UiNodeScript", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/UiNodeText", + label: "UiNodeText", + }, ], }, { @@ -293,10 +383,56 @@ const typedocSidebar: SidebarsConfig = { }, ], }, + { + type: "category", + label: "Functions", + items: [ + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/isUiNodeAnchor", + label: "isUiNodeAnchor", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/isUiNodeDiv", + label: "isUiNodeDiv", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/isUiNodeImage", + label: "isUiNodeImage", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/isUiNodeInput", + label: "isUiNodeInput", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/isUiNodeScript", + label: "isUiNodeScript", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/isUiNodeText", + label: "isUiNodeText", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/resolvePlaceholder", + label: "resolvePlaceholder", + }, + ], + }, { type: "category", label: "Components", items: [ + { + type: "doc", + id: "elements/reference/@ory/elements-react/variables/Node", + label: "Node", + }, { type: "doc", id: "elements/reference/@ory/elements-react/functions/OryCard", @@ -379,6 +515,72 @@ const typedocSidebar: SidebarsConfig = { }, ], }, + { + type: "category", + label: "Events", + items: [ + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryConsentSuccessEvent", + label: "OryConsentSuccessEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryErrorEvent", + label: "OryErrorEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryErrorHandler", + label: "OryErrorHandler", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryLoginSuccessEvent", + label: "OryLoginSuccessEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryRecoverySuccessEvent", + label: "OryRecoverySuccessEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryRegistrationSuccessEvent", + label: "OryRegistrationSuccessEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OrySettingsSuccessEvent", + label: "OrySettingsSuccessEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OrySuccessEvent", + label: "OrySuccessEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OrySuccessHandler", + label: "OrySuccessHandler", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryValidationErrorEvent", + label: "OryValidationErrorEvent", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryValidationErrorHandler", + label: "OryValidationErrorHandler", + }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryVerificationSuccessEvent", + label: "OryVerificationSuccessEvent", + }, + ], + }, { type: "category", label: "Hooks", @@ -403,12 +605,22 @@ const typedocSidebar: SidebarsConfig = { id: "elements/reference/@ory/elements-react/functions/useOryFlow", label: "useOryFlow", }, + { + type: "doc", + id: "elements/reference/@ory/elements-react/functions/useResendCode", + label: "useResendCode", + }, ], }, { type: "category", label: "Utilities", items: [ + { + type: "doc", + id: "elements/reference/@ory/elements-react/type-aliases/OryTransientPayload", + label: "OryTransientPayload", + }, { type: "doc", id: "elements/reference/@ory/elements-react/functions/messageTestId", @@ -564,6 +776,11 @@ const typedocSidebar: SidebarsConfig = { type: "category", label: "Functions", items: [ + { + type: "doc", + id: "elements/reference/@ory/nextjs/app/functions/getError", + label: "getError", + }, { type: "doc", id: "elements/reference/@ory/nextjs/app/functions/getFlowFactory", @@ -637,6 +854,17 @@ const typedocSidebar: SidebarsConfig = { type: "category", label: "@ory/nextjs/pages", items: [ + { + type: "category", + label: "Functions", + items: [ + { + type: "doc", + id: "elements/reference/@ory/nextjs/pages/functions/useError", + label: "useError", + }, + ], + }, { type: "category", label: "Hooks", diff --git a/src/sidebar-old.ts b/src/sidebar-old.ts index 98552532c3..9d1e3d6bc4 100644 --- a/src/sidebar-old.ts +++ b/src/sidebar-old.ts @@ -1469,11 +1469,8 @@ const elements: SidebarItemsConfig = [ label: "Reference", collapsible: false, link: { - type: "generated-index", - title: "Ory Elements Reference", - description: "Learn about the most important Ory Elements concepts!", - slug: "/elements/reference", - keywords: ["guides"], + type: "doc", + id: "elements/reference/index", }, items: [ ...require("../docs/elements/reference/typedoc-sidebar.ts").items,