@ory/elements-react 1.0.0-next.17 → 1.0.0-next.19

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## 1.0.0-next.19 (2024-12-31)
+
+### 🩹 Fixes
+
+- properly handle form submits in settings flow ([#322](https://github.com/ory/elements/pull/322))
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.18 (2024-12-30)
+
+### 🚀 Features
+
+- add page and app router examples ([#307](https://github.com/ory/elements/pull/307))
+- ⚠️  add getServerSession and SessionProvider ([#309](https://github.com/ory/elements/pull/309))
+- add @ory/nextjs package ([#303](https://github.com/ory/elements/pull/303))
+
+### 🩹 Fixes
+
+- align font sizes to design & use updated variable names ([#318](https://github.com/ory/elements/pull/318))
+- properly set default value for checkboxes ([#314](https://github.com/ory/elements/pull/314))
+- passkey and webauthn in settings flow ([#317](https://github.com/ory/elements/pull/317))
+
+### ⚠️  Breaking Changes
+
+- ⚠️  add getServerSession and SessionProvider ([#309](https://github.com/ory/elements/pull/309))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
 ## 1.0.0-next.17 (2024-11-27)
 
 

package/api-report/elements-react-client.api.json

@@ -173,53 +173,181 @@
       "preserveMemberOrder": false,
       "members": [
         {
-          "kind": "Function",
-          "canonicalReference": "@ory/elements-react!useSession:function(1)",
-          "docComment": "/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const { session, error, isLoading } = useSession()\n * ```\n *\n * @returns The current session, error and loading state.\n */\n",
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!SessionContextData:type",
+          "docComment": "",
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "useSession: (config?: "
+              "text": "type SessionContextData = "
             },
             {
               "kind": "Content",
-              "text": "{\n    sdk: {\n        url: string;\n    };\n}"
+              "text": "{\n    isLoading: boolean;\n    initialized: boolean;\n    session: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Session",
+              "canonicalReference": "@ory/client-fetch!Session:interface"
             },
             {
               "kind": "Content",
-              "text": ") => "
+              "text": " | null;\n    error: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Error",
+              "canonicalReference": "!Error:interface"
             },
             {
               "kind": "Content",
-              "text": "{\n    session: "
+              "text": " | undefined;\n    refetch: () => "
             },
             {
               "kind": "Reference",
-              "text": "Session",
-              "canonicalReference": "@ory/client-fetch!Session:interface"
+              "text": "Promise",
+              "canonicalReference": "!Promise:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<void>;\n}"
             },
             {
               "kind": "Content",
-              "text": " | undefined;\n    error: string | undefined;\n    isLoading: boolean;\n}"
+              "text": ";"
             }
           ],
-          "fileUrlPath": "dist/client/useSession.d.ts",
+          "fileUrlPath": "dist/client/session-provider.d.ts",
+          "releaseTag": "Public",
+          "name": "SessionContextData",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 8
+          }
+        },
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!SessionProvider:function(1)",
+          "docComment": "/**\n * A provider that fetches the session from the Ory Network and provides it to the children.\n *\n * To use this provider, wrap your application in it:\n * ```tsx\n * import { SessionProvider } from \"@ory/elements-react\"\n *\n * export default function App() {\n *   return (\n *     <SessionProvider>\n *       <MyApp />\n *     </SessionProvider>\n *   )\n * }\n * ```\n *\n * If you have a session from the server, you can pass it to the provider:\n * ```tsx\n * <SessionProvider session={serverSession}>\n * ```\n *\n * @param props - The provider props\n *\n * @see\n *\n * {@link useSession}\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function SessionProvider({ "
+            },
+            {
+              "kind": "Reference",
+              "text": "session",
+              "canonicalReference": "@ory/elements-react!~__type#session"
+            },
+            {
+              "kind": "Content",
+              "text": ": initialSession, children, baseUrl, }: "
+            },
+            {
+              "kind": "Reference",
+              "text": "SessionProviderProps",
+              "canonicalReference": "@ory/elements-react!SessionProviderProps:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "react_jsx_runtime.JSX.Element",
+              "canonicalReference": "@types/react!JSX.Element:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/client/session-provider.d.ts",
           "returnTypeTokenRange": {
-            "startIndex": 3,
+            "startIndex": 5,
             "endIndex": 6
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "config",
+              "parameterName": "{ session: initialSession, children, baseUrl, }",
               "parameterTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
+                "startIndex": 3,
+                "endIndex": 4
               },
-              "isOptional": true
+              "isOptional": false
+            }
+          ],
+          "name": "SessionProvider"
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!SessionProviderProps:type",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "type SessionProviderProps = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    session?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Session",
+              "canonicalReference": "@ory/client-fetch!Session:interface"
+            },
+            {
+              "kind": "Content",
+              "text": " | null;\n    baseUrl?: string;\n} & "
+            },
+            {
+              "kind": "Reference",
+              "text": "React.PropsWithChildren",
+              "canonicalReference": "@types/react!React.PropsWithChildren:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/client/session-provider.d.ts",
+          "releaseTag": "Public",
+          "name": "SessionProviderProps",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
+          }
+        },
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!useSession:function(1)",
+          "docComment": "/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const session = useSession()\n *\n * if (session.state == \"loading\") {\n *  return <div>Loading...</div>\n * }\n *\n * if (session.state == \"authenticated\") {\n *  return <div>Session: {session.session.id}</div>\n * }\n * ```\n *\n * :::note This is a client-side hook and must be used within a React component. On the server, you can use the getServerSession function from `@ory/nextjs` and hydrate SessionProvider with the session. :::\n *\n * @returns The current session, and error or loading state.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function useSession(): "
+            },
+            {
+              "kind": "Reference",
+              "text": "SessionContextData",
+              "canonicalReference": "@ory/elements-react!SessionContextData:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
             }
           ],
+          "fileUrlPath": "dist/client/useSession.d.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [],
           "name": "useSession"
         }
       ]

package/api-report/elements-react-client.api.md

@@ -4,19 +4,30 @@
 
 ```ts
 
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Session } from '@ory/client-fetch';
 
-// @public
-export const useSession: (config?: {
-    sdk: {
-        url: string;
-    };
-}) => {
-    session: Session | undefined;
-    error: string | undefined;
+// @public (undocumented)
+export type SessionContextData = {
     isLoading: boolean;
+    initialized: boolean;
+    session: Session | null;
+    error: Error | undefined;
+    refetch: () => Promise<void>;
 };
 
+// @public
+export function SessionProvider({ session: initialSession, children, baseUrl, }: SessionProviderProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export type SessionProviderProps = {
+    session?: Session | null;
+    baseUrl?: string;
+} & React.PropsWithChildren;
+
+// @public
+export function useSession(): SessionContextData;
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/api-report/elements-react-theme.api.json

@@ -478,6 +478,53 @@
           "parameters": [],
           "name": "DefaultCardHeader"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!DefaultCardLayout:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function DefaultCardLayout({ children }: "
+            },
+            {
+              "kind": "Reference",
+              "text": "PropsWithChildren",
+              "canonicalReference": "@types/react!React.PropsWithChildren:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "react_jsx_runtime.JSX.Element",
+              "canonicalReference": "@types/react!JSX.Element:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 4
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "{ children }",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "DefaultCardLayout"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!DefaultCardLogo:function(1)",

package/api-report/elements-react-theme.api.md

@@ -56,6 +56,9 @@ export function DefaultCardFooter(): react_jsx_runtime.JSX.Element | null;
 // @public (undocumented)
 export function DefaultCardHeader(): react_jsx_runtime.JSX.Element;
 
+// @public (undocumented)
+export function DefaultCardLayout({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element;
+
 // @public (undocumented)
 export function DefaultCardLogo(): react_jsx_runtime.JSX.Element;
 
@@ -138,8 +141,8 @@ export type VerificationFlowContextProps = {
 
 // Warnings were encountered during analysis:
 //
-// dist/theme/default/index.d.ts:36:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
-// dist/theme/default/index.d.ts:37:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:38:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:39:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

package/api-report/elements-react.api.json

@@ -1043,6 +1043,55 @@
             "endIndex": 2
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!OryCardSettingsSectionProps:type",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "type OryCardSettingsSectionProps = "
+            },
+            {
+              "kind": "Reference",
+              "text": "PropsWithChildren",
+              "canonicalReference": "@types/react!React.PropsWithChildren:type"
+            },
+            {
+              "kind": "Content",
+              "text": " & {\n    action: string;\n    method: string;\n    onSubmit: "
+            },
+            {
+              "kind": "Reference",
+              "text": "FormEventHandler",
+              "canonicalReference": "@types/react!React.FormEventHandler:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "HTMLFormElement",
+              "canonicalReference": "!HTMLFormElement:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/index.d.ts",
+          "releaseTag": "Public",
+          "name": "OryCardSettingsSectionProps",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 7
+          }
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!OryCardValidationMessages:function(1)",
@@ -1499,8 +1548,8 @@
             },
             {
               "kind": "Reference",
-              "text": "OryFormSectionProps",
-              "canonicalReference": "@ory/elements-react!OryFormSectionProps:type"
+              "text": "OryCardSettingsSectionProps",
+              "canonicalReference": "@ory/elements-react!OryCardSettingsSectionProps:type"
             },
             {
               "kind": "Content",
@@ -1535,8 +1584,8 @@
             },
             {
               "kind": "Reference",
-              "text": "OryFormSectionContentProps",
-              "canonicalReference": "@ory/elements-react!OryFormSectionContentProps:type"
+              "text": "OryFormSectionFooterProps",
+              "canonicalReference": "@ory/elements-react!OryFormSectionFooterProps:type"
             },
             {
               "kind": "Content",
@@ -2223,7 +2272,7 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "declare function OryFormSection({ children, nodes }: "
+              "text": "declare function OryFormSection({ children, nodes, ...rest }: "
             },
             {
               "kind": "Reference",
@@ -2253,7 +2302,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "{ children, nodes }",
+              "parameterName": "{ children, nodes, ...rest }",
               "parameterTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
@@ -2308,6 +2357,10 @@
               "text": "PropsWithChildren",
               "canonicalReference": "@types/react!React.PropsWithChildren:type"
             },
+            {
+              "kind": "Content",
+              "text": "<{\n    text?: string;\n}>"
+            },
             {
               "kind": "Content",
               "text": ";"
@@ -2318,7 +2371,7 @@
           "name": "OryFormSectionFooterProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 2
+            "endIndex": 3
           }
         },
         {
@@ -2337,7 +2390,16 @@
             },
             {
               "kind": "Content",
-              "text": "<{\n    nodes?: "
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "OryFormProps$1",
+              "canonicalReference": "@ory/elements-react!~OryFormProps$1:type"
+            },
+            {
+              "kind": "Content",
+              "text": " & {\n    nodes?: "
             },
             {
               "kind": "Reference",
@@ -2358,7 +2420,7 @@
           "name": "OryFormSectionProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 5
+            "endIndex": 7
           }
         },
         {
@@ -3054,7 +3116,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    linkButtons: "
+              "text": "{\n    linkButtons: ("
             },
             {
               "kind": "Reference",
@@ -3063,7 +3125,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n    unlinkButtons: "
+              "text": " & {\n        onClick: () => void;\n    })[];\n    unlinkButtons: ("
             },
             {
               "kind": "Reference",
@@ -3072,7 +3134,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n}"
+              "text": " & {\n        onClick: () => void;\n    })[];\n}"
             },
             {
               "kind": "Content",
@@ -3107,7 +3169,7 @@
             },
             {
               "kind": "Content",
-              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: "
+              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: ("
             },
             {
               "kind": "Reference",
@@ -3116,7 +3178,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n}"
+              "text": " & {\n        onClick: () => void;\n    })[];\n}"
             },
             {
               "kind": "Content",
@@ -3142,7 +3204,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    codes: string[];\n    regnerateButton?: "
+              "text": "{\n    codes: string[];\n    regnerateButton: "
             },
             {
               "kind": "Reference",
@@ -3151,7 +3213,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    revealButton?: "
+              "text": " | undefined;\n    revealButton: "
             },
             {
               "kind": "Reference",
@@ -3160,7 +3222,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n}"
+              "text": " | undefined;\n    onRegenerate: () => void;\n    onReveal: () => void;\n}"
             },
             {
               "kind": "Content",
@@ -3195,7 +3257,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    totpSecret: "
+              "text": " | undefined;\n    totpSecret: "
             },
             {
               "kind": "Reference",
@@ -3204,7 +3266,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    totpInput: "
+              "text": " | undefined;\n    totpInput: "
             },
             {
               "kind": "Reference",
@@ -3213,7 +3275,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n} | {\n    totpUnlink: "
+              "text": " | undefined;\n    totpUnlink: "
             },
             {
               "kind": "Reference",
@@ -3222,7 +3284,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n}"
+              "text": " | undefined;\n    onUnlink: () => void;\n}"
             },
             {
               "kind": "Content",
@@ -3266,7 +3328,7 @@
             },
             {
               "kind": "Content",
-              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: "
+              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: ("
             },
             {
               "kind": "Reference",
@@ -3275,7 +3337,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n}"
+              "text": " & {\n        onClick: () => void;\n    })[];\n}"
             },
             {
               "kind": "Content",