@ory/elements-react 0.0.0-pr.5cdcf132 → 0.0.0-pr.6ecad3e0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 1.0.0-rc.2 (2025-04-30)
+
+### 🚀 Features
+
+- method translation for totp, code, webauthn ([#500](https://github.com/ory/elements/pull/500))
+- add all missing stories ([#480](https://github.com/ory/elements/pull/480))
+- preview deployments for example apps ([#488](https://github.com/ory/elements/pull/488))
+- add back button to settings page ([#464](https://github.com/ory/elements/pull/464))
+
+### 🩹 Fixes
+
+- ⚠️  align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
+- sort captcha before submit button ([#507](https://github.com/ory/elements/pull/507))
+- cors credentials in default client ([#508](https://github.com/ory/elements/pull/508))
+- back button should return to application ([#465](https://github.com/ory/elements/pull/465))
+- adjust design of generic OIDC provider ([#492](https://github.com/ory/elements/pull/492))
+- use proper id for react element arrays ([#495](https://github.com/ory/elements/pull/495))
+- add test id to header messages ([#489](https://github.com/ory/elements/pull/489))
+- re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
+- resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
+- add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
+- resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
+
+### ⚠️  Breaking Changes
+
+- ⚠️  align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
+
+### ❤️ Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-rc.1 (2025-04-21)
 
 ### 🩹 Fixes

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
+import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, AccountExperienceConfiguration, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
 import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -394,33 +394,60 @@ type IntlContextProps = {
 };
 
 type IntlConfig = IntlContextProps;
+/**
+ * The configuration for Ory Elements.
+ *
+ * This configuration is used to customize the behavior and appearance of Ory Elements.
+ *
+ * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
+ *
+ * You can also set the name of the application, the logo URL, and the SDK configuration.
+ * By default, the name and logo are displayed in the card's header.
+ */
 type OryClientConfiguration = {
-    /**
-     * The name of the application the user is logging in to.
-     */
-    name: string;
     /**
      * An optional logo URL to display in the UI instead of the name.
+     * @deprecated Use `project.logo_light_url` instead.
      */
     logoUrl?: string;
-    stylesheet?: string;
-    favicon?: string;
+    /**
+     * The SDK configuration.
+     * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
+     */
     sdk: {
         url: string;
         options?: Partial<ConfigurationParameters>;
     };
-    project: {
-        registration_enabled: boolean;
-        verification_enabled: boolean;
-        recovery_enabled: boolean;
-        recovery_ui_url: string;
-        registration_ui_url: string;
-        verification_ui_url: string;
-        login_ui_url: string;
-        default_redirect_url?: string;
-    };
+    /**
+     * The internationalization configuration.
+     * This configuration is used to set the locale and any additional options used for the i18n library.
+     * The locale is used to determine the language of the UI.
+     * The default locale is "en".
+     */
     intl?: IntlConfig;
-};
+} & ({
+    /**
+     * The name of the application the user is logging in to.
+     * @deprecated Use `project.name` instead.
+     */
+    name: string;
+    /**
+     * The configuration for the project.
+     */
+    project: Omit<AccountExperienceConfiguration, "name"> & {
+        name?: string;
+    };
+} | {
+    /**
+     * The name of the application the user is logging in to.
+     * @deprecated Use `project.name` instead.
+     */
+    name?: string;
+    /**
+     * The configuration for the project.
+     */
+    project: AccountExperienceConfiguration;
+});
 
 /**
  * A generic flow container, containing a flowType, the flow itself and the config object

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
+import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, AccountExperienceConfiguration, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
 import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -394,33 +394,60 @@ type IntlContextProps = {
 };
 
 type IntlConfig = IntlContextProps;
+/**
+ * The configuration for Ory Elements.
+ *
+ * This configuration is used to customize the behavior and appearance of Ory Elements.
+ *
+ * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
+ *
+ * You can also set the name of the application, the logo URL, and the SDK configuration.
+ * By default, the name and logo are displayed in the card's header.
+ */
 type OryClientConfiguration = {
-    /**
-     * The name of the application the user is logging in to.
-     */
-    name: string;
     /**
      * An optional logo URL to display in the UI instead of the name.
+     * @deprecated Use `project.logo_light_url` instead.
      */
     logoUrl?: string;
-    stylesheet?: string;
-    favicon?: string;
+    /**
+     * The SDK configuration.
+     * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
+     */
     sdk: {
         url: string;
         options?: Partial<ConfigurationParameters>;
     };
-    project: {
-        registration_enabled: boolean;
-        verification_enabled: boolean;
-        recovery_enabled: boolean;
-        recovery_ui_url: string;
-        registration_ui_url: string;
-        verification_ui_url: string;
-        login_ui_url: string;
-        default_redirect_url?: string;
-    };
+    /**
+     * The internationalization configuration.
+     * This configuration is used to set the locale and any additional options used for the i18n library.
+     * The locale is used to determine the language of the UI.
+     * The default locale is "en".
+     */
     intl?: IntlConfig;
-};
+} & ({
+    /**
+     * The name of the application the user is logging in to.
+     * @deprecated Use `project.name` instead.
+     */
+    name: string;
+    /**
+     * The configuration for the project.
+     */
+    project: Omit<AccountExperienceConfiguration, "name"> & {
+        name?: string;
+    };
+} | {
+    /**
+     * The name of the application the user is logging in to.
+     * @deprecated Use `project.name` instead.
+     */
+    name?: string;
+    /**
+     * The configuration for the project.
+     */
+    project: AccountExperienceConfiguration;
+});
 
 /**
  * A generic flow container, containing a flowType, the flow itself and the config object

package/dist/index.js

@@ -50,13 +50,18 @@ var defaultNodeOrder = [
 ];
 function defaultNodeSorter(a, b) {
   var _a, _b;
+  const aIsCaptcha = a.group === "captcha";
+  const bIsCaptcha = b.group === "captcha";
+  const aIsSubmit = clientFetch.isUiNodeInputAttributes(a.attributes) && a.attributes.type === "submit";
+  const bIsSubmit = clientFetch.isUiNodeInputAttributes(b.attributes) && b.attributes.type === "submit";
+  if (aIsCaptcha && bIsSubmit) {
+    return -1;
+  }
+  if (bIsCaptcha && aIsSubmit) {
+    return 1;
+  }
   const aGroupWeight = (_a = defaultNodeOrder.indexOf(a.group)) != null ? _a : 999;
   const bGroupWeight = (_b = defaultNodeOrder.indexOf(b.group)) != null ? _b : 999;
-  if (b.group === "captcha" && clientFetch.isUiNodeInputAttributes(a.attributes) && a.attributes.type === "submit") {
-    return aGroupWeight - (bGroupWeight - 2);
-  } else if (a.group === "captcha" && clientFetch.isUiNodeInputAttributes(b.attributes) && b.attributes.type === "submit") {
-    return aGroupWeight - 2 - bGroupWeight;
-  }
   return aGroupWeight - bGroupWeight;
 }
 var defaultGroupOrder = [
@@ -565,6 +570,7 @@ function frontendClient(sdkUrl, opts = {}) {
   const config = new clientFetch.Configuration({
     ...opts,
     basePath: sdkUrl,
+    credentials: "include",
     headers: {
       Accept: "application/json",
       ...opts.headers
@@ -1231,7 +1237,7 @@ function OryTwoStepCardStateMethodActive({
           onAfterSubmit: handleAfterFormSubmit(dispatchFormState),
           children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
             ui.nodes.filter(
-              (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Captcha || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
+              (n) => clientFetch.isUiNodeScriptAttributes(n.attributes) || n.group === clientFetch.UiNodeGroupEnum.Default || n.group === clientFetch.UiNodeGroupEnum.Profile
             ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
             finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
           ] })