@ory/elements-react 1.2.0-rc.0 → 1.2.0-rc.1

package/dist/index.d.ts

@@ -1,30 +1,84 @@
-import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiText, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, ConfigurationParameters, AccountExperienceConfiguration, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler, UiNodeGroupEnum, FrontendApi } from '@ory/client-fetch';
-import { ComponentPropsWithoutRef, PropsWithChildren, FormEventHandler, MouseEventHandler, ComponentType, Dispatch } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
+import { UiNode, UiNodeInputAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeAnchorAttributes, UiNodeScriptAttributes, UiNodeDivisionAttributes, UiText, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, ConfigurationParameters, AccountExperienceConfiguration, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler, UiNodeGroupEnum, FrontendApi } from '@ory/client-fetch';
+import { ComponentPropsWithoutRef, PropsWithChildren, FormEventHandler, MouseEventHandler, ComponentType, ReactNode, Dispatch } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IntlShape } from 'react-intl';
+import { IntlShape, useIntl } from 'react-intl';
 
-declare const buttonStyles: (props?: ({
-    intent?: "primary" | "secondary" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ButtonVariants = VariantProps<typeof buttonStyles>;
+type UiNodeInput = UiNode & {
+    type: "input";
+    attributes: UiNodeInputAttributes;
+};
+declare function isUiNodeInput(node: UiNode): node is UiNodeInput;
+type UiNodeImage = UiNode & {
+    type: "img";
+    attributes: UiNodeImageAttributes;
+};
+declare function isUiNodeImage(node: UiNode): node is UiNodeImage;
+type UiNodeAnchor = UiNode & {
+    type: "a";
+    attributes: UiNodeAnchorAttributes;
+};
+declare function isUiNodeAnchor(node: UiNode): node is UiNodeAnchor;
+type UiNodeText = UiNode & {
+    type: "text";
+    attributes: UiNodeTextAttributes;
+};
+declare function isUiNodeText(node: UiNode): node is UiNodeText;
+type UiNodeScript = UiNode & {
+    type: "script";
+    attributes: UiNodeScriptAttributes;
+};
+declare function isUiNodeScript(node: UiNode): node is UiNodeScript;
+type UiNodeDiv = UiNode & {
+    type: "div";
+    attributes: UiNodeDivisionAttributes;
+};
+declare function isUiNodeDiv(node: UiNode): node is UiNodeDiv;
+type UiNodeFixed = UiNodeInput | UiNodeImage | UiNodeAnchor | UiNodeText | UiNodeScript | UiNodeDiv;
 
+type OryNodeButtonButtonProps = {
+    type: "button" | "submit" | "reset";
+    name: string;
+    value: string | number | readonly string[] | undefined;
+    onClick: (event: any) => void;
+    disabled?: boolean;
+};
 type OryNodeButtonProps = {
+    /** @deprecated Use node.attributes instead. */
     attributes: UiNodeInputAttributes;
-    node: UiNode;
-} & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
+    node: UiNodeInput;
+    /**
+     * Indicates whether the form is currently being submitted via this button.
+     */
+    isSubmitting: boolean;
+    buttonProps: OryNodeButtonButtonProps;
+};
+/**
+ * Props for the OryNodeSsoButton component.
+ */
+type OryNodeSsoButtonProps = {
+    node: UiNodeInput;
+    /** @deprecated Use node.attributes instead. */
+    attributes: UiNodeInputAttributes;
+    provider: string;
+    isSubmitting: boolean;
+    buttonProps: OryNodeButtonButtonProps;
+};
 type OryNodeAnchorProps = {
     attributes: UiNodeAnchorAttributes;
     node: UiNode;
 } & Omit<ComponentPropsWithoutRef<"a">, "children">;
 type OryNodeLabelProps = {
+    /** @deprecated Use node.attributes instead. */
     attributes: UiNodeInputAttributes;
-    node: UiNode;
-} & ComponentPropsWithoutRef<"label">;
+    node: UiNodeInput;
+    fieldError?: object;
+} & PropsWithChildren;
 type OryNodeTextProps = {
+    node: UiNodeText;
+    /**
+     * @deprecated Use node.attributes instead.
+     */
     attributes: UiNodeTextAttributes;
-    node: UiNode;
 };
 type OryCardLogoProps = Record<string, never>;
 type OryNodeCaptchaProps = {
@@ -45,10 +99,12 @@ type OryCardAuthMethodListItemProps = {
         id: string;
         values?: Record<string, string>;
     };
+    disabled?: boolean;
 };
 type OryNodeImageProps = {
+    /** @deprecated Use node.attributes instead. */
     attributes: UiNodeImageAttributes;
-    node: UiNode;
+    node: UiNodeImage;
 };
 /**
  * A generic type for the form values.
@@ -60,15 +116,54 @@ type FormValues = Record<string, string | boolean | number | undefined>;
 type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
     onSubmit: FormEventHandler<HTMLFormElement>;
 };
+type OryNodeCheckboxInputProps = {
+    name: string;
+    onChange: (event: any) => void;
+    disabled?: boolean;
+    type: "checkbox";
+    checked: boolean;
+    value: string | number | readonly string[] | undefined;
+    ref: (instance: any) => void;
+};
+type OryNodeCheckboxProps = {
+    /** @deprecated - use node.attributes */
+    attributes: UiNodeInputAttributes;
+    node: UiNodeInput;
+    /** @deprecated - use inputProps.onClick */
+    onClick: MouseEventHandler;
+    inputProps: OryNodeCheckboxInputProps;
+};
+type OryNodeInputInputProps = {
+    name: string;
+    value: string | number | readonly string[] | undefined;
+    onClick: MouseEventHandler;
+    onChange: (event: any) => void;
+    onBlur: () => void;
+    ref: (instance: any) => void;
+    disabled?: boolean;
+    type: string;
+    autoComplete?: string;
+    maxLength?: number;
+    placeholder: string;
+};
 type OryNodeInputProps = {
+    /** @deprecated - use node.attributes */
     attributes: UiNodeInputAttributes;
-    node: UiNode;
+    node: UiNodeInput;
+    /** @deprecated - use inputProps.onClick */
     onClick?: MouseEventHandler;
+    inputProps: OryNodeInputInputProps;
 };
 type OryNodeConsentScopeCheckboxProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
     onCheckedChange: (checked: boolean) => void;
+    inputProps: {
+        name: string;
+        disabled?: boolean;
+        checked: boolean;
+        value: string;
+    };
 };
 type OryFormSectionContentProps = PropsWithChildren<{
     title?: string;
@@ -205,42 +300,43 @@ declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;
 
 type OrySettingsRecoveryCodesProps = {
     codes: string[];
-    regnerateButton: UiNode | undefined;
-    revealButton: UiNode | undefined;
+    regenerateButton: UiNodeInput | undefined;
+    revealButton: UiNodeInput | undefined;
     onRegenerate: () => void;
     onReveal: () => void;
+    isSubmitting: boolean;
 };
 type OrySettingsTotpProps = {
-    totpImage: UiNode | undefined;
-    totpSecret: UiNode | undefined;
-    totpInput: UiNode | undefined;
-    totpUnlink: UiNode | undefined;
+    totpImage: UiNodeImage | undefined;
+    totpSecret: UiNodeText | undefined;
+    totpInput: UiNodeInput | undefined;
+    totpUnlink: UiNodeInput | undefined;
     onUnlink: () => void;
+    isSubmitting: boolean;
 };
+/**
+ * Props for a button used in the settings flow
+ */
+type OryNodeSettingsButton = {
+    /** @deprecated - use buttonProps.onClick */
+    onClick: () => void;
+    buttonProps: OryNodeButtonButtonProps;
+} & UiNodeInput;
 type OrySettingsSsoProps = {
-    linkButtons: (UiNode & {
-        onClick: () => void;
-    })[];
-    unlinkButtons: (UiNode & {
-        onClick: () => void;
-    })[];
+    linkButtons: OryNodeSettingsButton[];
+    unlinkButtons: OryNodeSettingsButton[];
+    isSubmitting: boolean;
 };
 type OrySettingsWebauthnProps = {
-    nameInput: UiNode;
-    triggerButton: UiNode & {
-        onClick: () => void;
-    };
-    removeButtons: (UiNode & {
-        onClick: () => void;
-    })[];
+    nameInput: UiNodeInput;
+    triggerButton: OryNodeSettingsButton;
+    removeButtons: OryNodeSettingsButton[];
+    isSubmitting: boolean;
 };
 type OrySettingsPasskeyProps = {
-    triggerButton: UiNode & {
-        onClick: () => void;
-    };
-    removeButtons: (UiNode & {
-        onClick: () => void;
-    })[];
+    triggerButton: OryNodeSettingsButton;
+    removeButtons: OryNodeSettingsButton[];
+    isSubmitting: boolean;
 };
 
 /**
@@ -319,14 +415,6 @@ declare function OrySettingsFormSection({ children, nodes, ...rest }: OryFormSec
 type OryFormSsoRootProps = PropsWithChildren<{
     nodes: UiNode[];
 }>;
-/**
- * Props for the OryNodeSsoButton component.
- */
-type OryNodeSsoButtonProps = {
-    node: UiNode;
-    attributes: UiNodeInputAttributes;
-    onClick?: () => void;
-};
 /**
  * Renders the flow's OIDC buttons.
  *
@@ -384,7 +472,7 @@ type OryFlowComponents = {
         /**
          * The Checkbox component is rendered whenever an input node with of boolean type is encountered.
          */
-        Checkbox: ComponentType<OryNodeInputProps>;
+        Checkbox: ComponentType<OryNodeCheckboxProps>;
         /**
          * The Text component is rendered whenever a "text" node is encountered.
          */
@@ -549,6 +637,95 @@ interface OryFormProps extends PropsWithChildren {
  */
 declare function OryForm({ children, onAfterSubmit }: OryFormProps): react_jsx_runtime.JSX.Element;
 
+type TextRendererProps = {
+    node: UiNodeText;
+};
+declare function TextRenderer({ node }: TextRendererProps): react_jsx_runtime.JSX.Element;
+
+type ImageRendererProps = {
+    node: UiNodeImage;
+};
+declare function ImageRenderer({ node }: ImageRendererProps): react_jsx_runtime.JSX.Element;
+
+type CheckboxRendererProps = {
+    node: UiNodeInput;
+};
+declare function CheckboxRenderer({ node }: CheckboxRendererProps): react_jsx_runtime.JSX.Element;
+
+type TextBasedInputProps = {
+    node: UiNodeInput;
+};
+declare function InputRenderer({ node }: TextBasedInputProps): react_jsx_runtime.JSX.Element;
+
+declare function ConsentCheckboxRenderer({ node }: {
+    node: UiNodeInput;
+}): react_jsx_runtime.JSX.Element;
+
+type SsoButtonProps = {
+    node: UiNodeInput;
+};
+declare function SSOButtonRenderer({ node }: SsoButtonProps): react_jsx_runtime.JSX.Element;
+
+type ButtonRendererProps = {
+    node: UiNodeInput;
+};
+declare function ButtonRenderer({ node }: ButtonRendererProps): react_jsx_runtime.JSX.Element;
+/**
+ * Renders the component passed for button nodes.
+ *
+ * @param props - The properties of the button node to render.
+ * @returns A React element representing the button node.
+ */
+type ButtonRenderer = typeof ButtonRenderer;
+
+type NodeProps = {
+    node: UiNode;
+};
+/**
+ * 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.
+ *
+ * @param props - NodeProps containing the UiNode to render
+ * @returns A ReactNode rendering the appropriate component for the given UiNode
+ * @group Components
+ */
+declare const Node: (({ node }: NodeProps) => ReactNode) & {
+    Button: typeof ButtonRenderer;
+    SsoButton: typeof SSOButtonRenderer;
+    ConsentCheckbox: typeof ConsentCheckboxRenderer;
+    Input: typeof InputRenderer;
+    Checkbox: typeof CheckboxRenderer;
+    Image: typeof ImageRenderer;
+    Text: typeof TextRenderer;
+};
+
+/**
+ * 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 && (
+ *    <button onClick={resendCode}>Resend Code</button>
+ *  )}
+ * )
+ * ```
+ *
+ * @returns the callback to trigger a code resend
+ * @group Hooks
+ */
+declare function useResendCode(): {
+    resendCode: () => void;
+    resendCodeNode: UiNode | undefined;
+};
+
 /**
  * The `useComponents` hook provides access to the Ory Flow components provided in the `OryComponentProvider`.
  *
@@ -785,6 +962,7 @@ interface OryClientConfiguration {
  * @group Utilities
  */
 declare const uiTextToFormattedMessage: ({ id, context, text }: Omit<UiText, "type">, intl: IntlShape) => string;
+declare function resolvePlaceholder(text: UiText, intl: ReturnType<typeof useIntl>): string;
 
 /**
  * Props for the submit handler
@@ -1060,4 +1238,4 @@ interface OryConfigurationProviderProps extends PropsWithChildren {
  */
 declare function OryConfigurationProvider({ children, sdk: initialConfig, project, }: OryConfigurationProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryCardValidationMessagesProps, type OryClientConfiguration, OryConfigurationProvider, OryConsentCard, type OryElementsConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, type OryFormProps, type OryFormRootProps, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSsoButtons, OryFormSsoForm, type OryFormSsoRootProps, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeSsoButtonProps, type OryNodeTextProps, OryPageHeader, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySelfServiceFlowCard, OrySettingsCard, type OrySettingsFormProps, OrySettingsFormSection, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsSsoProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, type OryToastProps, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow };
+export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, type IntlConfig, type LoginFlowContainer, Node, type NodeProps, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryCardValidationMessagesProps, type OryClientConfiguration, OryConfigurationProvider, OryConsentCard, type OryElementsConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, type OryFormProps, type OryFormRootProps, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSsoButtons, OryFormSsoForm, type OryFormSsoRootProps, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonButtonProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeCheckboxInputProps, type OryNodeCheckboxProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputInputProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeSettingsButton, type OryNodeSsoButtonProps, type OryNodeTextProps, OryPageHeader, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySelfServiceFlowCard, OrySettingsCard, type OrySettingsFormProps, OrySettingsFormSection, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsSsoProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, type OryToastProps, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type UiNodeAnchor, type UiNodeDiv, type UiNodeFixed, type UiNodeImage, type UiNodeInput, type UiNodeScript, type UiNodeText, type VerificationFlowContainer, isUiNodeAnchor, isUiNodeDiv, isUiNodeImage, isUiNodeInput, isUiNodeScript, isUiNodeText, messageTestId, resolvePlaceholder, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow, useResendCode };