@wise/dynamic-flow-client 4.13.0 → 4.14.1-experimental-048a281

package/build/main.css

@@ -346,15 +346,13 @@ button.df-back-btn {
     width: 300px;
   }
 }
-.df-back-btn .tw-avatar__content {
-  cursor: pointer;
-  background-color: var(--color-background-neutral);
-}
-.df-back-btn:hover .tw-avatar__content {
-  background-color: var(--color-background-neutral-hover);
-}
-.df-back-btn:active .tw-avatar__content {
-  background-color: var(--color-background-neutral-active);
+.df-toolbar {
+  display: flex;
+  gap: 0.25em;
+  overflow-x: auto;
+  padding: 0.5em;
+  padding-right: 0;
+  margin-left: auto;
 }
 .splash-screen {
   display: flex;

package/build/main.js

@@ -1297,6 +1297,15 @@ var isStringSchema = (schema) => "type" in schema && schema.type === "string";
 var isStringSchemaWithUpload = (schema) => isStringSchema(schema) && schema.format === "base64url";
 var isSchemaWithPersistAsync = (schema) => "persistAsync" in schema && !isNullish(schema.persistAsync);
 
+// src/revamp/renderers/mappers/utils/pick.ts
+function pick(obj, ...keys) {
+  const result = {};
+  keys.forEach((key) => {
+    result[key] = obj[key];
+  });
+  return result;
+}
+
 // src/revamp/renderers/stepComponentToProps.ts
 var stepComponentToProps = (component, rendererMapperProps) => {
   const {
@@ -1320,6 +1329,7 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     back,
     control,
     description,
+    toolbar: getToolbarProps(component.toolbar, rendererMapperProps),
     error,
     loadingState,
     step,
@@ -1331,15 +1341,17 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     }
   }, rendererMapperProps);
 };
-
-// src/revamp/renderers/mappers/utils/pick.ts
-function pick(obj, ...keys) {
-  const result = {};
-  keys.forEach((key) => {
-    result[key] = obj[key];
-  });
-  return result;
-}
+var getToolbarProps = (toolbar, rendererMapperProps) => {
+  if (!toolbar) {
+    return void 0;
+  }
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(toolbar, "uid", "control", "type")), {
+    type: "toolbar",
+    items: toolbar.items.map((item) => __spreadProps(__spreadValues({}, item), {
+      disabled: item.disabled || rendererMapperProps.stepLoadingState !== "idle"
+    }))
+  }), rendererMapperProps);
+};
 
 // src/revamp/renderers/mappers/alertComponentToProps.ts
 var alertComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(
@@ -6130,6 +6142,29 @@ var mapStepSchemas = (uid, step, stepLocalValue, mapperProps, referencedSchemaId
   });
 };
 
+// src/revamp/domain/mappers/mapToolbarToComponent.ts
+var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
+  if (!toolbar) {
+    return void 0;
+  }
+  const { onBehavior } = mapperProps;
+  return __spreadProps(__spreadValues({}, toolbar), {
+    type: "toolbar",
+    uid: `${uid}.toolbar`,
+    items: toolbar.items.map((item) => {
+      const context = item.context ? mapLegacyContext(item.context) : void 0;
+      const behavior = getDomainLayerBehavior({ behavior: item.behavior }, []);
+      return __spreadProps(__spreadValues({}, item), {
+        context: context ? mapLegacyContext(context) : void 0,
+        disabled: !!item.disabled,
+        onClick: () => {
+          void onBehavior(behavior);
+        }
+      });
+    })
+  });
+};
+
 // src/revamp/domain/mappers/mapStepToComponent.ts
 var mapStepToComponent = (_a) => {
   var _b = _a, {
@@ -6192,9 +6227,11 @@ var mapStepToComponent = (_a) => {
   const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
   );
+  const toolbar = mapToolbarToComponent(uid, step.toolbar, mapperProps);
   const stepComponent = createStepComponent({
     uid,
     back,
+    toolbar,
     layoutComponents,
     schemaComponents,
     control,

package/build/main.mjs

@@ -1254,6 +1254,15 @@ var isStringSchema = (schema) => "type" in schema && schema.type === "string";
 var isStringSchemaWithUpload = (schema) => isStringSchema(schema) && schema.format === "base64url";
 var isSchemaWithPersistAsync = (schema) => "persistAsync" in schema && !isNullish(schema.persistAsync);
 
+// src/revamp/renderers/mappers/utils/pick.ts
+function pick(obj, ...keys) {
+  const result = {};
+  keys.forEach((key) => {
+    result[key] = obj[key];
+  });
+  return result;
+}
+
 // src/revamp/renderers/stepComponentToProps.ts
 var stepComponentToProps = (component, rendererMapperProps) => {
   const {
@@ -1277,6 +1286,7 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     back,
     control,
     description,
+    toolbar: getToolbarProps(component.toolbar, rendererMapperProps),
     error,
     loadingState,
     step,
@@ -1288,15 +1298,17 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     }
   }, rendererMapperProps);
 };
-
-// src/revamp/renderers/mappers/utils/pick.ts
-function pick(obj, ...keys) {
-  const result = {};
-  keys.forEach((key) => {
-    result[key] = obj[key];
-  });
-  return result;
-}
+var getToolbarProps = (toolbar, rendererMapperProps) => {
+  if (!toolbar) {
+    return void 0;
+  }
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(toolbar, "uid", "control", "type")), {
+    type: "toolbar",
+    items: toolbar.items.map((item) => __spreadProps(__spreadValues({}, item), {
+      disabled: item.disabled || rendererMapperProps.stepLoadingState !== "idle"
+    }))
+  }), rendererMapperProps);
+};
 
 // src/revamp/renderers/mappers/alertComponentToProps.ts
 var alertComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(
@@ -6087,6 +6099,29 @@ var mapStepSchemas = (uid, step, stepLocalValue, mapperProps, referencedSchemaId
   });
 };
 
+// src/revamp/domain/mappers/mapToolbarToComponent.ts
+var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
+  if (!toolbar) {
+    return void 0;
+  }
+  const { onBehavior } = mapperProps;
+  return __spreadProps(__spreadValues({}, toolbar), {
+    type: "toolbar",
+    uid: `${uid}.toolbar`,
+    items: toolbar.items.map((item) => {
+      const context = item.context ? mapLegacyContext(item.context) : void 0;
+      const behavior = getDomainLayerBehavior({ behavior: item.behavior }, []);
+      return __spreadProps(__spreadValues({}, item), {
+        context: context ? mapLegacyContext(context) : void 0,
+        disabled: !!item.disabled,
+        onClick: () => {
+          void onBehavior(behavior);
+        }
+      });
+    })
+  });
+};
+
 // src/revamp/domain/mappers/mapStepToComponent.ts
 var mapStepToComponent = (_a) => {
   var _b = _a, {
@@ -6149,9 +6184,11 @@ var mapStepToComponent = (_a) => {
   const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
   );
+  const toolbar = mapToolbarToComponent(uid, step.toolbar, mapperProps);
   const stepComponent = createStepComponent({
     uid,
     back,
+    toolbar,
     layoutComponents,
     schemaComponents,
     control,

package/build/types/revamp/domain/components/step/StepDomainComponent.d.ts

@@ -6,10 +6,12 @@ import type { StepPolling } from '../../features/polling/getStepPolling';
 import { StepRefreshAfter } from '../../features/refreshAfter/getStepRefreshAfter';
 import { ModalComponent } from '../ModalComponent';
 import { ExternalConfirmationComponent } from './ExternalConfirmationComponent';
+import { ToolbarComponent } from './ToolbarComponent';
 export type StepDomainComponent = BaseComponent & {
     type: 'step';
     kind: 'step';
     back?: BackNavigation;
+    toolbar?: ToolbarComponent;
     layoutComponents: LayoutComponent[];
     schemaComponents: SchemaComponent[];
     control?: string;
@@ -38,7 +40,7 @@ type BackNavigation = {
     title?: string;
     onClick: () => void;
 };
-export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "layoutComponents" | "schemaComponents" | "control" | "description" | "error" | "externalConfirmation" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
+export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "toolbar" | "layoutComponents" | "schemaComponents" | "control" | "description" | "error" | "externalConfirmation" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
     stepPolling?: StepPolling;
     stepRefreshAfter?: StepRefreshAfter;
     updateComponent: UpdateComponent;

package/build/types/revamp/domain/components/step/ToolbarComponent.d.ts

@@ -0,0 +1,21 @@
+import { Media } from '@wise/dynamic-flow-types/build/next';
+import { Context } from '../../types';
+export type ToolbarComponent = {
+    type: 'toolbar';
+    uid: string;
+    control?: string;
+    items: ToolbarItem[];
+};
+type ToolbarItem = ToolbarButton;
+type ToolbarButton = {
+    type: 'toolbar-button';
+    title: string;
+    accessibilityDescription?: string;
+    media?: Media;
+    onClick: () => void;
+    control?: string;
+    context?: Context;
+    disabled: boolean;
+    analyticsId?: string;
+};
+export {};

package/build/types/revamp/domain/mappers/mapToolbarToComponent.d.ts

@@ -0,0 +1,4 @@
+import { Step } from '@wise/dynamic-flow-types/build/next';
+import { ToolbarComponent } from '../components/step/ToolbarComponent';
+import type { MapperProps } from './schema/types';
+export declare const mapToolbarToComponent: (uid: string, toolbar: Step["toolbar"], mapperProps: MapperProps) => ToolbarComponent | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.13.0",
+  "version": "4.14.1-experimental-048a281",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -38,20 +38,20 @@
     "@babel/preset-typescript": "7.27.1",
     "@chromatic-com/storybook": "4.1.0",
     "@formatjs/cli": "^6.7.2",
-    "@storybook/addon-a11y": "^9.1.1",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
-    "@storybook/react-vite": "9.1.1",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/react-vite": "9.1.2",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.6.4",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.101.0",
+    "@transferwise/components": "46.104.0",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/icons": "3.22.3",
     "@transferwise/neptune-css": "14.24.5",
     "@types/jest": "30.0.0",
-    "@types/node": "22.17.0",
+    "@types/node": "22.17.1",
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
@@ -59,7 +59,7 @@
     "@wise/components-theming": "^1.6.4",
     "babel-jest": "30.0.5",
     "esbuild": "0.25.8",
-    "eslint-plugin-storybook": "9.1.1",
+    "eslint-plugin-storybook": "9.1.2",
     "jest": "30.0.5",
     "jest-environment-jsdom": "30.0.5",
     "jest-fetch-mock": "^3.0.3",
@@ -71,15 +71,15 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^9.1.0",
-    "stylelint": "16.23.0",
+    "storybook": "^9.1.2",
+    "stylelint": "16.23.1",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
-    "tsx": "4.20.3",
+    "tsx": "4.20.4",
     "typescript": "5.9.2",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -95,7 +95,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.11.0"
+    "@wise/dynamic-flow-types": "3.12.0-experimental-048a281"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",