@ory/elements-react 1.0.0-next.14 → 1.0.0-next.15

package/dist/index.d.mts

@@ -16,12 +16,6 @@ type OryNodeButtonProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
 } & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
-type OryCurrentIdentifierProps = {
-    attributes: UiNodeInputAttributes;
-    node: UiNode;
-    onClick?: () => void;
-    href?: string;
-} & Omit<ComponentPropsWithoutRef<"button">, "children" | "onClick">;
 type OryNodeAnchorProps = {
     attributes: UiNodeAnchorAttributes;
     node: UiNode;
@@ -118,40 +112,9 @@ type OryCardDividerProps = Record<string, never>;
  */
 declare function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null;
 
-type OryFormGroupsProps = PropsWithChildren<{
-    groups: UiNodeGroupEnum[];
-}>;
-type OryFormGroupProps = PropsWithChildren;
-declare function OryFormGroups({ children, groups }: OryFormGroupsProps): react_jsx_runtime.JSX.Element;
-
-type OryMessageContentProps = {
-    message: UiText;
-};
-type OryMessageRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-declare function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
-
-type OryFormOidcButtonsProps = PropsWithChildren<{
-    hideDivider?: boolean;
-}>;
-type OryFormOidcRootProps = PropsWithChildren<{
-    nodes: UiNode[];
-}>;
-type OryNodeOidcButtonProps = {
-    node: UiNode;
-    attributes: UiNodeInputAttributes;
-    onClick?: () => void;
-};
-declare function OryFormOidcButtons({ children, hideDivider, }: OryFormOidcButtonsProps): react_jsx_runtime.JSX.Element | null;
-declare function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
-
 type OryPageHeaderProps = Record<never, never>;
 declare const HeadlessPageHeader: () => react_jsx_runtime.JSX.Element;
 
-type OryFormSectionProps = PropsWithChildren<{
-    nodes?: UiNode[];
-}>;
-declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
-
 declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;
 
 type OrySettingsRecoveryCodesProps = {
@@ -184,6 +147,37 @@ type OrySettingsPasskeyProps = {
     removeButtons: UiNode[];
 };
 
+type OryFormGroupsProps = PropsWithChildren<{
+    groups: UiNodeGroupEnum[];
+}>;
+type OryFormGroupProps = PropsWithChildren;
+declare function OryFormGroups({ children, groups }: OryFormGroupsProps): react_jsx_runtime.JSX.Element;
+
+type OryMessageContentProps = {
+    message: UiText;
+};
+type OryMessageRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
+
+type OryFormSectionProps = PropsWithChildren<{
+    nodes?: UiNode[];
+}>;
+declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+
+type OryFormOidcButtonsProps = PropsWithChildren<{
+    hideDivider?: boolean;
+}>;
+type OryFormOidcRootProps = PropsWithChildren<{
+    nodes: UiNode[];
+}>;
+type OryNodeOidcButtonProps = {
+    node: UiNode;
+    attributes: UiNodeInputAttributes;
+    onClick?: () => void;
+};
+declare function OryFormOidcButtons({ children, hideDivider, }: OryFormOidcButtonsProps): react_jsx_runtime.JSX.Element | null;
+declare function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
+
 /**
  * A record of all the components that are used in the OryForm component.
  */
@@ -199,12 +193,6 @@ type OryFlowComponents = {
          * It renders the "Login with Google", "Login with Facebook" etc. buttons.
          */
         OidcButton: ComponentType<OryNodeOidcButtonProps>;
-        /**
-         * The CurrentIdentifierButton component is rendered whenever a button of group "identifier_first" node is encountered.
-         *
-         * It is used to show the current identifier and can allow the user to start a new flow, if they want to.
-         */
-        CurrentIdentifierButton: ComponentType<OryCurrentIdentifierProps>;
         /**
          * Anchor component, rendered whenever an "anchor" node is encountered
          */
@@ -344,9 +332,8 @@ type DeepPartialTwoLevels<T> = {
 type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
 type OryFormProps = PropsWithChildren<{
     onAfterSubmit?: (method: string | number | boolean | undefined) => void;
-    nodes?: UiNode[];
 }>;
-declare function OryForm({ children, onAfterSubmit, nodes }: OryFormProps): string | react_jsx_runtime.JSX.Element;
+declare function OryForm({ children, onAfterSubmit }: OryFormProps): string | react_jsx_runtime.JSX.Element;
 
 declare function useComponents(): OryFlowComponents;
 declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
@@ -449,31 +436,6 @@ type ErrorFlowContainer = OryFlow<FlowType.Error, FlowError>;
  */
 type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
 
-/**
- * Returns an object that contains the current flow and the flow type, as well as the configuration.
- *
- * @returns The current flow container
- */
-declare function useOryFlow(): FlowContextValue;
-/**
- * Function to set the flow container.
- */
-type FlowContainerSetter = Dispatch<Partial<OryFlowContainer>>;
-/**
- * The return value of the OryFlowContext.
- */
-type FlowContextValue = OryFlowContainer & {
-    /**
-     * Function to set the flow container.
-     */
-    setFlowContainer: FlowContainerSetter;
-};
-
-type OryProviderProps = {
-    components: OryFlowComponents;
-} & OryFlowContainer & PropsWithChildren;
-declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
-
 /**
  * Converts a UiText to a FormattedMessage.
  * The UiText contains the id of the message and the context.
@@ -546,4 +508,58 @@ declare function messageTestId(message: UiText): {
     "data-testid": string;
 };
 
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormValues, HeadlessPageHeader, 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, OryCardValidationMessages, type OryClientConfiguration, type OryCurrentIdentifierProps, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+type FormState = {
+    current: "provide_identifier";
+} | {
+    current: "select_method";
+} | {
+    current: "method_active";
+    method: UiNodeGroupEnum;
+} | {
+    current: "success_screen";
+} | {
+    current: "settings";
+};
+type FormStateAction = {
+    type: "action_flow_update";
+    flow: OryFlowContainer;
+} | {
+    type: "action_select_method";
+    method: UiNodeGroupEnum;
+};
+
+/**
+ * Returns an object that contains the current flow and the flow type, as well as the configuration.
+ *
+ * @returns The current flow container
+ */
+declare function useOryFlow(): FlowContextValue;
+/**
+ * Function to set the flow container.
+ */
+type FlowContainerSetter = Dispatch<OryFlowContainer>;
+/**
+ * The return value of the OryFlowContext.
+ */
+type FlowContextValue = OryFlowContainer & {
+    /**
+     * Function to set the flow container.
+     */
+    setFlowContainer: FlowContainerSetter;
+    /**
+     * The current form state.
+     * @see FormState
+     */
+    formState: FormState;
+    /**
+     * Dispatch function to update the form state.
+     */
+    dispatchFormState: Dispatch<FormStateAction>;
+};
+
+type OryProviderProps = {
+    components: OryFlowComponents;
+} & OryFlowContainer & PropsWithChildren;
+declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, 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, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };

package/dist/index.d.ts

@@ -16,12 +16,6 @@ type OryNodeButtonProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
 } & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
-type OryCurrentIdentifierProps = {
-    attributes: UiNodeInputAttributes;
-    node: UiNode;
-    onClick?: () => void;
-    href?: string;
-} & Omit<ComponentPropsWithoutRef<"button">, "children" | "onClick">;
 type OryNodeAnchorProps = {
     attributes: UiNodeAnchorAttributes;
     node: UiNode;
@@ -118,40 +112,9 @@ type OryCardDividerProps = Record<string, never>;
  */
 declare function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null;
 
-type OryFormGroupsProps = PropsWithChildren<{
-    groups: UiNodeGroupEnum[];
-}>;
-type OryFormGroupProps = PropsWithChildren;
-declare function OryFormGroups({ children, groups }: OryFormGroupsProps): react_jsx_runtime.JSX.Element;
-
-type OryMessageContentProps = {
-    message: UiText;
-};
-type OryMessageRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-declare function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
-
-type OryFormOidcButtonsProps = PropsWithChildren<{
-    hideDivider?: boolean;
-}>;
-type OryFormOidcRootProps = PropsWithChildren<{
-    nodes: UiNode[];
-}>;
-type OryNodeOidcButtonProps = {
-    node: UiNode;
-    attributes: UiNodeInputAttributes;
-    onClick?: () => void;
-};
-declare function OryFormOidcButtons({ children, hideDivider, }: OryFormOidcButtonsProps): react_jsx_runtime.JSX.Element | null;
-declare function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
-
 type OryPageHeaderProps = Record<never, never>;
 declare const HeadlessPageHeader: () => react_jsx_runtime.JSX.Element;
 
-type OryFormSectionProps = PropsWithChildren<{
-    nodes?: UiNode[];
-}>;
-declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
-
 declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;
 
 type OrySettingsRecoveryCodesProps = {
@@ -184,6 +147,37 @@ type OrySettingsPasskeyProps = {
     removeButtons: UiNode[];
 };
 
+type OryFormGroupsProps = PropsWithChildren<{
+    groups: UiNodeGroupEnum[];
+}>;
+type OryFormGroupProps = PropsWithChildren;
+declare function OryFormGroups({ children, groups }: OryFormGroupsProps): react_jsx_runtime.JSX.Element;
+
+type OryMessageContentProps = {
+    message: UiText;
+};
+type OryMessageRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
+
+type OryFormSectionProps = PropsWithChildren<{
+    nodes?: UiNode[];
+}>;
+declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+
+type OryFormOidcButtonsProps = PropsWithChildren<{
+    hideDivider?: boolean;
+}>;
+type OryFormOidcRootProps = PropsWithChildren<{
+    nodes: UiNode[];
+}>;
+type OryNodeOidcButtonProps = {
+    node: UiNode;
+    attributes: UiNodeInputAttributes;
+    onClick?: () => void;
+};
+declare function OryFormOidcButtons({ children, hideDivider, }: OryFormOidcButtonsProps): react_jsx_runtime.JSX.Element | null;
+declare function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
+
 /**
  * A record of all the components that are used in the OryForm component.
  */
@@ -199,12 +193,6 @@ type OryFlowComponents = {
          * It renders the "Login with Google", "Login with Facebook" etc. buttons.
          */
         OidcButton: ComponentType<OryNodeOidcButtonProps>;
-        /**
-         * The CurrentIdentifierButton component is rendered whenever a button of group "identifier_first" node is encountered.
-         *
-         * It is used to show the current identifier and can allow the user to start a new flow, if they want to.
-         */
-        CurrentIdentifierButton: ComponentType<OryCurrentIdentifierProps>;
         /**
          * Anchor component, rendered whenever an "anchor" node is encountered
          */
@@ -344,9 +332,8 @@ type DeepPartialTwoLevels<T> = {
 type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
 type OryFormProps = PropsWithChildren<{
     onAfterSubmit?: (method: string | number | boolean | undefined) => void;
-    nodes?: UiNode[];
 }>;
-declare function OryForm({ children, onAfterSubmit, nodes }: OryFormProps): string | react_jsx_runtime.JSX.Element;
+declare function OryForm({ children, onAfterSubmit }: OryFormProps): string | react_jsx_runtime.JSX.Element;
 
 declare function useComponents(): OryFlowComponents;
 declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
@@ -449,31 +436,6 @@ type ErrorFlowContainer = OryFlow<FlowType.Error, FlowError>;
  */
 type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
 
-/**
- * Returns an object that contains the current flow and the flow type, as well as the configuration.
- *
- * @returns The current flow container
- */
-declare function useOryFlow(): FlowContextValue;
-/**
- * Function to set the flow container.
- */
-type FlowContainerSetter = Dispatch<Partial<OryFlowContainer>>;
-/**
- * The return value of the OryFlowContext.
- */
-type FlowContextValue = OryFlowContainer & {
-    /**
-     * Function to set the flow container.
-     */
-    setFlowContainer: FlowContainerSetter;
-};
-
-type OryProviderProps = {
-    components: OryFlowComponents;
-} & OryFlowContainer & PropsWithChildren;
-declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
-
 /**
  * Converts a UiText to a FormattedMessage.
  * The UiText contains the id of the message and the context.
@@ -546,4 +508,58 @@ declare function messageTestId(message: UiText): {
     "data-testid": string;
 };
 
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormValues, HeadlessPageHeader, 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, OryCardValidationMessages, type OryClientConfiguration, type OryCurrentIdentifierProps, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+type FormState = {
+    current: "provide_identifier";
+} | {
+    current: "select_method";
+} | {
+    current: "method_active";
+    method: UiNodeGroupEnum;
+} | {
+    current: "success_screen";
+} | {
+    current: "settings";
+};
+type FormStateAction = {
+    type: "action_flow_update";
+    flow: OryFlowContainer;
+} | {
+    type: "action_select_method";
+    method: UiNodeGroupEnum;
+};
+
+/**
+ * Returns an object that contains the current flow and the flow type, as well as the configuration.
+ *
+ * @returns The current flow container
+ */
+declare function useOryFlow(): FlowContextValue;
+/**
+ * Function to set the flow container.
+ */
+type FlowContainerSetter = Dispatch<OryFlowContainer>;
+/**
+ * The return value of the OryFlowContext.
+ */
+type FlowContextValue = OryFlowContainer & {
+    /**
+     * Function to set the flow container.
+     */
+    setFlowContainer: FlowContainerSetter;
+    /**
+     * The current form state.
+     * @see FormState
+     */
+    formState: FormState;
+    /**
+     * Dispatch function to update the form state.
+     */
+    dispatchFormState: Dispatch<FormStateAction>;
+};
+
+type OryProviderProps = {
+    components: OryFlowComponents;
+} & OryFlowContainer & PropsWithChildren;
+declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, 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, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };