@wise/dynamic-flow-client-internal 5.0.0-experimental-c979470 → 5.0.1-exp-css-28d60ea

package/README.md

@@ -19,7 +19,7 @@ npm install @wise/dynamic-flow-client-internal
 pnpm install @wise/dynamic-flow-client-internal
 ```
 
-2. Install required peer dependencies (if not already installed). Please refer to setup instructions for `@transferwise/components` and `@transferwise/neptune-css` if installing up for the first time.
+2. Install required peer dependencies (if not already installed). Please refer to setup instructions for `@transferwise/components` and `@transferwise/neptune-css` if installing for the first time.
 
 ```
 # yarn
@@ -50,15 +50,15 @@ The `DynamicFlow` component must be wraped in a Neptune `Provider` to support lo
 import {
   Provider,
   SnackbarProvider,
-  translations as componentTranslations,
+  translations as dsTranslations,
 } from '@transferwise/components';
 import { getLocalisedMessages } from '@transferwise/crab/client';
 import {
   DynamicFlow,
-  translations as dynamicFlowsTranslations,
+  translations as dfTranslations,
 } from '@wise/dynamic-flow-client-internal';
 
-const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations]);
+const messages = getLocalisedMessages(locale, [dsTranslations, dfTranslations]);
 
 return (
   <Provider i18n={{ locale, messages }}>
@@ -91,17 +91,17 @@ You'll need to merge the '@transferwise/components' translations with the '@wise
 import {
   Provider,
   SnackbarProvider,
-  translations as componentTranslations,
+  translations as dsTranslations,
 } from '@transferwise/components';
 import {
   DynamicFlow,
-  translations as dynamicFlowsTranslations,
+  translations as dfTranslations,
 } from '@wise/dynamic-flow-client-internal';
 
 // create your messages object
 const messages: Record<string, string> = {
-  ...(componentTranslations[lang] || componentTranslations[lang.replace('-', '_')] || componentTranslations[lang.substring(0, 2)] || {}),
-  ...(translations[lang] || translations[lang.replace('-', '_')] || translations[lang.substring(0, 2)] || {}),
+  ...(dsTranslations[lang] || dsTranslations[lang.replace('-', '_')] || dsTranslations[lang.substring(0, 2)] || {}),
+  ...(dfTranslations[lang] || dfTranslations[lang.replace('-', '_')] || dfTranslations[lang.substring(0, 2)] || {}),
 }
 
 return (
@@ -203,13 +203,13 @@ const mockCustomFetch = (input, init) => Promise.resolve(new Response(JSON.strin
 
 ### Telemetry
 
-The `DynamicFlow` component accepts two optional props: `onEvent` and `onLog` which can be used to track and log.
+The `DynamicFlow` component accepts two optional props: `onAnalytics` and `onLog` which can be used to track and log.
 
 In the example below we send tracking events to Mixpanel and logging events to Rollbar.
 
 ```tsx
 <DynamicFlow
-  onEvent={(event, props) => mixpanel.track(event, props)}
+  onAnalytics={(event, props) => mixpanel.track(event, props)}
   onLog={(level, message, extra) => Rollbar[level](message, extra)}
 />
 ```
@@ -217,7 +217,7 @@ In the example below we send tracking events to Mixpanel and logging events to R
 Alternatively, you can log to the browser console:
 
 ```ts
-onEvent={(event, props) => console.log(event, props)}
+onAnalytics={(event, props) => console.log(event, props)}
 onLog={(level, message, extra) => {
   const levelToConsole = {
     critical: console.error,
@@ -230,56 +230,36 @@ onLog={(level, message, extra) => {
 }}
 ```
 
-### Loader configuration
+## DynamicForm Component
 
-By default, DF will display a loading animation (The `Loader` component from Neptune) when the first step is loading. It will not display it during refresh-on-change or while submitting forms.
-
-You can change the defaults by passing a `loaderConfig` prop:
-
-```ts
-type LoaderConfig = {
-  size?: `xs | sm | md | lg | xl`;
-  initial?: boolean;
-  submission?: boolean;
-};
-```
-
-| property     | type    | notes                                                                          | default |
-| ------------ | ------- | ------------------------------------------------------------------------------ | ------- |
-| `size`       | string  | The size of the Loader component.                                              | `xl`    |
-| `initial`    | boolean | Whether or not to display the Loader component while loading the initial step. | true    |
-| `submission` | boolean | Whether or not to display the Loader component during form submissions.        | false   |
-
-## DynamicFragment
-
-If you need to get the submittable data outside of a submission, you can use the `DynamicFragment` component. This will give you access to two methods: `getValue` and `validate` via a [ref](https://react.dev/reference/react/useRef). For example:
+If you need to get the submittable data outside of a submission, you can use the `DynamicForm` component. This will give you access to two methods: `getValue` and `validate` via a [ref](https://react.dev/reference/react/useRef). For example:
 
 ```tsx
-import type { DynamicFragmentController } from '@wise/dynamic-flow-client-internal';
-import { DynamicFragment } from '@wise/dynamic-flow-client-internal';
+import type { DynamicFormController } from '@wise/dynamic-flow-client-internal';
+import { DynamicForm } from '@wise/dynamic-flow-client-internal';
 import { useRef } from 'react';
 
 function DynamicFlowWithRef() {
-  const ref = useRef<DynamicFragmentController>(null);
+  const ref = useRef<DynamicFormController>(null);
 
   return (
-    <>
-      <DynamicFragment
+    <div>
+      <DynamicForm
           ref={ref}
           flowId={"id"}
           customFetch={fetch}
-          initialStep={selectedStep}
-          onValueChange={async () => {
-              const value = (await ref.current?.getValue()) ?? null);
+          initialStep={myStep}
+          onValueChange={ async () => {
+              const value = (await ref.current?.getValue()) ?? null;
               console.log('Value changed to', JSON.stringify(value));
           }}
           onCompletion={(error) => console.error(error)}
           onCompletion={() => console.log('Completed')}
       />
       <Button
-        onClick={async () => {
+        onClick={ async () => {
           // This will get the value, whether or not the form is valid
-          const value = (await ref.current?.getValue()) ?? null);
+          const value = (await ref.current?.getValue()) ?? null;
 
           // This will trigger validation of the form and show any validation messages to the user.
           // The response is a boolean indicating whether or not the form is valid.
@@ -290,7 +270,7 @@ function DynamicFlowWithRef() {
       >
         Log value
       </Button>
-    </>
+    </div>
   );
 }
 ```

package/build/main.js

@@ -2688,11 +2688,13 @@ var import_components_theming = require("@wise/components-theming");
 var import_react16 = require("react");
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
-  const previousThemeHookValue = (0, import_components_theming.useTheme)();
-  const previousTheme = (0, import_react16.useMemo)(() => previousThemeHookValue.theme, []);
+  const theming = (0, import_components_theming.useTheme)();
+  const previousTheme = (0, import_react16.useMemo)(() => theming.theme, []);
   (0, import_react16.useEffect)(() => {
+    theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
+      theming.setTheme(previousTheme);
       trackEvent(ThemeRequiredEventName, { theme: previousTheme });
     } : () => {
     };
@@ -3729,10 +3731,25 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
+// src/dynamicFlow/messages.ts
+var import_react_intl26 = require("react-intl");
+var messages_default = (0, import_react_intl26.defineMessages)({
+  copied: {
+    id: "df.wise.CopyFeedback.copy",
+    defaultMessage: "Copied to clipboard",
+    description: "Appears in a snackbar when the copy operation succeeds."
+  },
+  copyFailed: {
+    id: "df.wise.CopyFeedback.copyFailed",
+    defaultMessage: "Failed to copy to clipboard",
+    description: "Appears in a snackbar when the copy operation fails."
+  }
+});
+
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "4.38.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.0.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3758,34 +3775,13 @@ var logToRollbar = (level, message, extra) => {
 };
 
 // src/dynamicFlow/telemetry/getTrackEvent.ts
-var import_components_theming2 = require("@wise/components-theming");
-var getTrackEvent = (onEvent, onAnalytics, onThemeChange) => (name, properties) => {
+var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
   onEvent == null ? void 0 : onEvent(name, properties);
-  if (name.includes(ThemeRequiredEventName)) {
-    const { theme } = properties != null ? properties : { theme: "personal" };
-    if (theme && (0, import_components_theming2.isThemeModern)(theme)) {
-      onThemeChange == null ? void 0 : onThemeChange(theme);
-    }
-  } else {
+  if (!name.includes(ThemeRequiredEventName)) {
     onAnalytics == null ? void 0 : onAnalytics(name, properties);
   }
 };
 
-// src/dynamicFlow/messages.ts
-var import_react_intl26 = require("react-intl");
-var messages_default = (0, import_react_intl26.defineMessages)({
-  copied: {
-    id: "df.wise.CopyFeedback.copy",
-    defaultMessage: "Copied to clipboard",
-    description: "Appears in a snackbar when the copy operation succeeds."
-  },
-  copyFailed: {
-    id: "df.wise.CopyFeedback.copyFailed",
-    defaultMessage: "Failed to copy to clipboard",
-    description: "Appears in a snackbar when the copy operation fails."
-  }
-});
-
 // src/dynamicFlow/DynamicFlow.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var wiseRenderers = getWiseRenderers();
@@ -3799,18 +3795,14 @@ function DynamicFlow(props) {
     onAnalytics,
     onEvent,
     onLog,
-    onLink = openLinkInNewTab,
-    onThemeChange
+    onLink = openLinkInNewTab
   } = props;
   const { formatMessage } = (0, import_react_intl27.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
   const httpClient = useWiseHttpClient(customFetch);
   const mergedRenderers = (0, import_react19.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
   const logEvent = (0, import_react19.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react19.useMemo)(
-    () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
-    [onEvent, onAnalytics, onThemeChange]
-  );
+  const trackEvent = (0, import_react19.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = (copiedContent) => {
     if (copiedContent) {
       createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -3839,18 +3831,14 @@ var DynamicForm = (0, import_react19.forwardRef)(function DynamicForm2(props, re
     onAnalytics,
     onEvent,
     onLog,
-    onLink = openLinkInNewTab,
-    onThemeChange
+    onLink = openLinkInNewTab
   } = props;
   const { formatMessage } = (0, import_react_intl27.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
   const httpClient = useWiseHttpClient(customFetch);
   const mergedRenderers = (0, import_react19.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
   const logEvent = (0, import_react19.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react19.useMemo)(
-    () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
-    [onEvent, onAnalytics, onThemeChange]
-  );
+  const trackEvent = (0, import_react19.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = (copiedContent) => {
     if (copiedContent) {
       createSnackBar({ text: formatMessage(messages_default.copied) });

package/build/main.mjs

@@ -2676,11 +2676,13 @@ import { useTheme } from "@wise/components-theming";
 import { useEffect as useEffect8, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
-  const previousThemeHookValue = useTheme();
-  const previousTheme = useMemo(() => previousThemeHookValue.theme, []);
+  const theming = useTheme();
+  const previousTheme = useMemo(() => theming.theme, []);
   useEffect8(() => {
+    theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
+      theming.setTheme(previousTheme);
       trackEvent(ThemeRequiredEventName, { theme: previousTheme });
     } : () => {
     };
@@ -3723,10 +3725,25 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
+// src/dynamicFlow/messages.ts
+import { defineMessages as defineMessages12 } from "react-intl";
+var messages_default = defineMessages12({
+  copied: {
+    id: "df.wise.CopyFeedback.copy",
+    defaultMessage: "Copied to clipboard",
+    description: "Appears in a snackbar when the copy operation succeeds."
+  },
+  copyFailed: {
+    id: "df.wise.CopyFeedback.copyFailed",
+    defaultMessage: "Failed to copy to clipboard",
+    description: "Appears in a snackbar when the copy operation fails."
+  }
+});
+
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "4.38.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.0.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3752,34 +3769,13 @@ var logToRollbar = (level, message, extra) => {
 };
 
 // src/dynamicFlow/telemetry/getTrackEvent.ts
-import { isThemeModern } from "@wise/components-theming";
-var getTrackEvent = (onEvent, onAnalytics, onThemeChange) => (name, properties) => {
+var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
   onEvent == null ? void 0 : onEvent(name, properties);
-  if (name.includes(ThemeRequiredEventName)) {
-    const { theme } = properties != null ? properties : { theme: "personal" };
-    if (theme && isThemeModern(theme)) {
-      onThemeChange == null ? void 0 : onThemeChange(theme);
-    }
-  } else {
+  if (!name.includes(ThemeRequiredEventName)) {
     onAnalytics == null ? void 0 : onAnalytics(name, properties);
   }
 };
 
-// src/dynamicFlow/messages.ts
-import { defineMessages as defineMessages12 } from "react-intl";
-var messages_default = defineMessages12({
-  copied: {
-    id: "df.wise.CopyFeedback.copy",
-    defaultMessage: "Copied to clipboard",
-    description: "Appears in a snackbar when the copy operation succeeds."
-  },
-  copyFailed: {
-    id: "df.wise.CopyFeedback.copyFailed",
-    defaultMessage: "Failed to copy to clipboard",
-    description: "Appears in a snackbar when the copy operation fails."
-  }
-});
-
 // src/dynamicFlow/DynamicFlow.tsx
 import { jsx as jsx82 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
@@ -3793,18 +3789,14 @@ function DynamicFlow(props) {
     onAnalytics,
     onEvent,
     onLog,
-    onLink = openLinkInNewTab,
-    onThemeChange
+    onLink = openLinkInNewTab
   } = props;
   const { formatMessage } = useIntl15();
   const createSnackBar = useSnackBarIfAvailable();
   const httpClient = useWiseHttpClient(customFetch);
   const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
   const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = useMemo2(
-    () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
-    [onEvent, onAnalytics, onThemeChange]
-  );
+  const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = (copiedContent) => {
     if (copiedContent) {
       createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -3833,18 +3825,14 @@ var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
     onAnalytics,
     onEvent,
     onLog,
-    onLink = openLinkInNewTab,
-    onThemeChange
+    onLink = openLinkInNewTab
   } = props;
   const { formatMessage } = useIntl15();
   const createSnackBar = useSnackBarIfAvailable();
   const httpClient = useWiseHttpClient(customFetch);
   const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
   const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = useMemo2(
-    () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
-    [onEvent, onAnalytics, onThemeChange]
-  );
+  const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = (copiedContent) => {
     if (copiedContent) {
       createSnackBar({ text: formatMessage(messages_default.copied) });

package/build/types/dynamicFlow/DynamicFlow.d.ts

@@ -1,8 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { DynamicFlowProps as DynamicFlowCoreProps, DynamicFormController } from '@wise/dynamic-flow-client';
-import { Theming } from '@wise/components-theming';
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-export type OnThemeChange = (theme: Theming['theme']) => void;
 type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
@@ -14,7 +12,6 @@ export type DynamicFlowProps = Prettify<MakeOptional<Omit<DynamicFlowCoreProps,
     displayStepTitle?: boolean;
     customFetch?: DynamicFlowCoreProps['httpClient'];
     onAnalytics?: DynamicFlowCoreProps['onEvent'];
-    onThemeChange?: OnThemeChange;
 }>;
 export declare function DynamicFlow(props: DynamicFlowProps): import("react/jsx-runtime").JSX.Element;
 export type DynamicFormProps = Omit<DynamicFlowProps, 'onCompletion'> & {

package/build/types/dynamicFlow/telemetry/getTrackEvent.d.ts

@@ -1,5 +1,4 @@
 import { DynamicFlowProps } from '@wise/dynamic-flow-client';
-import { OnThemeChange } from '../DynamicFlow';
 type OnEvent = DynamicFlowProps['onEvent'];
-export declare const getTrackEvent: (onEvent: OnEvent, onAnalytics: OnEvent, onThemeChange: OnThemeChange | undefined) => OnEvent;
+export declare const getTrackEvent: (onEvent: OnEvent, onAnalytics: OnEvent) => OnEvent;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.0.0-experimental-c979470",
+  "version": "5.0.1-exp-css-28d60ea",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -16,7 +16,8 @@
       "import": "./build/main.mjs",
       "require": "./build/main.js"
     },
-    "./build/main.css": "./build/main.css"
+    "./build/main.css": "./build/main.css",
+    "./main.css": "./build/main.css"
   },
   "sideEffects": [
     "*.css"
@@ -54,10 +55,10 @@
     "@types/react": "18.3.26",
     "@types/react-dom": "18.3.7",
     "@wise/art": "2.24.7",
-    "@wise/components-theming": "^1.7.0",
+    "@wise/components-theming": "^1.8.0",
     "babel-jest": "30.2.0",
     "currency-flags": "4.0.7",
-    "esbuild": "0.25.9",
+    "esbuild": "0.27.0",
     "eslint-plugin-storybook": "9.1.16",
     "framer-motion": "^12.23.24",
     "jest": "30.2.0",
@@ -79,7 +80,7 @@
     "tsx": "4.20.6",
     "typescript": "5.9.3",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "4.0.0-experimental-c979470",
+    "@wise/dynamic-flow-types": "4.0.0",
     "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
@@ -88,14 +89,14 @@
     "@transferwise/icons": "^3 || ^4",
     "@transferwise/neptune-css": "^14.22.0",
     "@wise/art": "^2.19.0",
-    "@wise/components-theming": "^0.7.1 || ^1",
+    "@wise/components-theming": "^1.8.0",
     "react": "^18",
     "react-dom": "^18",
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-types": "4.0.0-experimental-c979470",
-    "@wise/dynamic-flow-client": "5.0.0-experimental-c979470"
+    "@wise/dynamic-flow-client": "5.0.1-exp-css-28d60ea",
+    "@wise/dynamic-flow-types": "4.0.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",