@wise/dynamic-flow-client 3.20.2 → 3.21.1

package/build/main.mjs

@@ -138,12 +138,12 @@ var init_clsx = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@wise+art@2.15.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-a91e5689.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.15.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.11_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-a91e5689.esm.js
 import { useState as useState2, useEffect as useEffect2, forwardRef, Suspense, lazy } from "react";
 import { jsx as jsx17, jsxs as jsxs4, Fragment as Fragment3 } from "react/jsx-runtime";
 var unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
 var init_index_a91e5689_esm = __esm({
-  "../../node_modules/.pnpm/@wise+art@2.15.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-a91e5689.esm.js"() {
+  "../../node_modules/.pnpm/@wise+art@2.15.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.11_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-a91e5689.esm.js"() {
     "use strict";
     init_clsx();
     unknownFlagName = "wise";
@@ -11404,7 +11404,7 @@ var DateInputRenderer_default = DateInputRenderer;
 // ../renderers/src/DecisionRenderer.tsx
 import { NavigationOptionsList, NavigationOption, Header } from "@transferwise/components";
 
-// ../../node_modules/.pnpm/@wise+art@2.15.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.15.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.11_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
 init_index_a91e5689_esm();
 init_clsx();
 import "react";
@@ -14714,10 +14714,9 @@ var priorities = {
   positive: "primary",
   negative: "primary"
 };
-var getButtonPriority = (component) => {
-  var _a;
-  const actionType = component.action.type;
-  return (_a = component.control) != null ? _a : actionType ? priorities[actionType] : "secondary";
+var getButtonPriority = (control, action) => {
+  const actionType = action ? action.type : void 0;
+  return control != null ? control : actionType ? priorities[actionType] : "secondary";
 };
 var contextToType = {
   positive: "positive",
@@ -14732,13 +14731,16 @@ var actionTypeToType = {
   positive: "positive",
   negative: "negative"
 };
-var getButtonType = (component) => {
-  if (component.context) {
-    return contextToType[component.context];
+var getButtonType = (context, action) => {
+  if (context) {
+    return contextToType[context];
   }
-  const actionType = component.action.type;
+  const actionType = action ? action.type : void 0;
   return actionType ? actionTypeToType[actionType] : "accent";
 };
+var getButtonTypeFromContext = (context) => {
+  return context ? contextToType[context] : "accent";
+};
 var getButtonSize = (size) => {
   switch (size) {
     case "xs":
@@ -14756,13 +14758,23 @@ var getButtonSize = (size) => {
 // src/legacy/layout/button/DynamicButton.tsx
 import { jsx as jsx72 } from "react/jsx-runtime";
 function DynamicButton(props) {
-  var _a;
+  return props.component.behavior ? /* @__PURE__ */ jsx72(DynamicButtonWithBehavior, __spreadValues({}, props)) : /* @__PURE__ */ jsx72(DynamicButtonWithoutBehavior, __spreadValues({}, props));
+}
+function DynamicButtonWithoutBehavior(props) {
+  var _a, _b;
   const { component, onAction } = props;
   const componentAction = component.action;
-  const type = getButtonType(component);
-  const priority = getButtonPriority(component);
+  const type = getButtonType(component.context, componentAction);
+  const priority = getButtonPriority(component.control, componentAction);
   const { loading } = useDynamicFlow();
   const className = getMargin2(component.margin || "md");
+  const disabled = loading || component.disabled || (componentAction == null ? void 0 : componentAction.disabled);
+  const title = (_b = (_a = component.title) != null ? _a : componentAction == null ? void 0 : componentAction.title) != null ? _b : "";
+  const onClick = () => {
+    if (componentAction) {
+      onAction(componentAction);
+    }
+  };
   return /* @__PURE__ */ jsx72(
     Button6,
     {
@@ -14771,9 +14783,41 @@ function DynamicButton(props) {
       priority,
       block: true,
       className,
-      disabled: loading || component.disabled || componentAction.disabled,
-      onClick: () => onAction(componentAction),
-      children: (_a = component.title) != null ? _a : componentAction.title
+      disabled,
+      onClick,
+      children: title
+    }
+  );
+}
+function DynamicButtonWithBehavior(props) {
+  var _a, _b;
+  const { component } = props;
+  const type = getButtonTypeFromContext(component.context);
+  const priority = (_a = component.control) != null ? _a : "secondary";
+  const { loading } = useDynamicFlow();
+  const className = getMargin2(component.margin || "md");
+  const disabled = loading || component.disabled;
+  const title = (_b = component.title) != null ? _b : "";
+  const onClick = () => {
+    const { behavior } = component;
+    if (behavior == null ? void 0 : behavior.action) {
+      props.onAction(behavior.action);
+    }
+    if (behavior == null ? void 0 : behavior.link) {
+      window.open(behavior.link.url, "_blank");
+    }
+  };
+  return /* @__PURE__ */ jsx72(
+    Button6,
+    {
+      size: getButtonSize(component.size),
+      type: priority === "tertiary" ? void 0 : type,
+      priority,
+      block: true,
+      className,
+      disabled,
+      onClick,
+      children: title
     }
   );
 }

package/build/types/legacy/layout/button/DynamicButton.d.ts

@@ -1,7 +1,9 @@
-import type { ButtonLayout } from '@wise/dynamic-flow-types';
+import type { Behavior, ButtonLayout } from '@wise/dynamic-flow-types';
 import type { CommonLayoutProps } from '../DynamicLayout';
 type Props = Omit<CommonLayoutProps, 'submitted' | 'onModelChange' | 'onPersistAsync'> & {
-    component: ButtonLayout;
+    component: ButtonLayout & {
+        behavior?: Behavior;
+    };
 };
 declare function DynamicButton(props: Props): import("react/jsx-runtime").JSX.Element;
 export default DynamicButton;

package/build/types/legacy/layout/button/utils.d.ts

@@ -1,4 +1,5 @@
-import type { ButtonLayout, Size } from '@wise/dynamic-flow-types';
-export declare const getButtonPriority: (component: ButtonLayout) => "primary" | "secondary" | "tertiary";
-export declare const getButtonType: (component: ButtonLayout) => "positive" | "negative" | "accent";
+import type { Action, Size } from '@wise/dynamic-flow-types';
+export declare const getButtonPriority: (control: "primary" | "secondary" | "tertiary" | undefined, action: Action | undefined) => "primary" | "secondary" | "tertiary";
+export declare const getButtonType: (context: "positive" | "negative" | "neutral" | undefined, action: Action | undefined) => "positive" | "negative" | "accent";
+export declare const getButtonTypeFromContext: (context: "positive" | "negative" | "neutral" | undefined) => "positive" | "negative" | "accent";
 export declare const getButtonSize: (size: Size | undefined) => "sm" | "md" | "lg";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.20.2",
+  "version": "3.21.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -27,26 +27,26 @@
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
   "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@babel/plugin-syntax-flow": "7.24.7",
-    "@babel/plugin-transform-react-jsx": "7.25.2",
-    "@babel/preset-env": "7.25.4",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
+    "@babel/core": "7.25.7",
+    "@babel/plugin-syntax-flow": "7.25.7",
+    "@babel/plugin-transform-react-jsx": "7.25.7",
+    "@babel/preset-env": "7.25.7",
+    "@babel/preset-react": "7.25.7",
+    "@babel/preset-typescript": "7.25.7",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
-    "@chromatic-com/storybook": "1.9.0",
+    "@chromatic-com/storybook": "2.0.2",
     "@formatjs/cli": "^6.2.12",
-    "@storybook/addon-a11y": "^8.3.2",
-    "@storybook/addon-actions": "^8.3.2",
-    "@storybook/addon-essentials": "^8.3.2",
-    "@storybook/addon-interactions": "^8.3.2",
-    "@storybook/addon-links": "^8.3.2",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.3.2",
-    "@storybook/react": "^8.3.2",
-    "@storybook/react-webpack5": "^8.3.2",
-    "@storybook/test": "^8.3.2",
-    "@storybook/types": "^8.3.2",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@storybook/types": "^8.3.5",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
@@ -57,14 +57,14 @@
     "@transferwise/neptune-css": "14.18.0",
     "@types/enzyme": "^3.10.18",
     "@types/jest": "29.5.13",
-    "@types/react": "18.3.8",
+    "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
     "@types/react-intl": "3.0.0",
     "@wise/art": "2.15.0",
     "@wise/components-theming": "^1.6.0",
     "babel-jest": "29.7.0",
     "enzyme": "^3.11.0",
-    "esbuild": "0.23.1",
+    "esbuild": "0.24.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -77,16 +77,16 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.7.0",
-    "storybook": "^8.3.2",
+    "storybook": "^8.3.5",
     "stylelint": "16.9.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.1",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.19.1",
     "typescript": "5.6.2",
-    "webpack": "5.94.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "webpack": "5.95.0",
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.31",
@@ -103,7 +103,7 @@
     "nanoid": "5.0.7",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.23.0"
+    "@wise/dynamic-flow-types": "2.23.2"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",