@wise/dynamic-flow-client-internal 3.9.0-experimental-bd037e3 → 3.9.0-experimental-90bdf26

package/README.md

@@ -238,32 +238,28 @@ type LoaderConfig = {
 | `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   |
 
-## Using Dynamic Flow with a ref
+## DynamicFragment
 
-**Note:** this only works with `DynamicFlowRevamp`.
-
-If you need to extract the submittable data outside of a submission, you can do so by providing us with a ref. This will give you access to two methods: `getValue` and `validate`. For example:
+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:
 
 ```tsx
-import type { DynamicFlowController } from '@wise/dynamic-flow-client-internal';
-import { DynamicFlowRevamp } from '@wise/dynamic-flow-client-internal';
+import type { DynamicFragmentController } from '@wise/dynamic-flow-client-internal';
+import { DynamicFragment } from '@wise/dynamic-flow-client-internal';
 import { useRef } from 'react';
 
 function DynamicFlowWithRef() {
-  const ref = useRef<DynamicFlowController | null>(null);
+  const ref = useRef<DynamicFragmentController>(null);
 
   return (
     <>
-      <DynamicFlowRevamp
+      <DynamicFragment
           ref={ref}
           flowId={"id"}
           customFetch={fetch}
           initialStep={selectedStep}
-          onEvent={(eventName, props) => {
-            // Note - this event will only be fired if you provide a ref
-            if (eventName === 'Dynamic Flow - Value Changed') {
-              // Value has changed.
-            }
+          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')}

package/build/dynamicFlow/DynamicFlow.js

@@ -10,15 +10,25 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DynamicFlowRevamp as DynamicFlowCoreRevamp, DynamicFlow as DynamicFlowCoreLegacy, } from '@wise/dynamic-flow-client';
+import { DynamicFlowRevamp as DynamicFlowCoreRevamp, DynamicFlow as DynamicFlowCoreLegacy, DynamicFragmentWise, } from '@wise/dynamic-flow-client';
 import { forwardRef } from 'react';
 export function DynamicFlowLegacy(props) {
     var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a;
     var coreProps = __assign(__assign({}, props), { httpClient: customFetch });
     return _jsx(DynamicFlowCoreLegacy, __assign({}, coreProps));
 }
-export var DynamicFlowRevamp = forwardRef(function DynamicFlowRevamp(props, ref) {
+export function DynamicFlowRevamp(props) {
     var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a;
     var coreProps = __assign(__assign({}, props), { httpClient: customFetch });
-    return _jsx(DynamicFlowCoreRevamp, __assign({ ref: ref }, coreProps));
+    return _jsx(DynamicFlowCoreRevamp, __assign({}, coreProps));
+}
+/**
+ * DynamicFragment is like DynamicFlowRevamp, but it also accepts a ForwardedRef.
+ * This ref conforms to the DynamicFragmentController type, containing two functions: `getValue` and `validate`.
+ * @experimental This component may be changed in the future without notice.
+ */
+export var DynamicFragment = forwardRef(function DynamicFragment(props, ref) {
+    var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a;
+    var coreProps = __assign(__assign({}, props), { httpClient: customFetch });
+    return _jsx(DynamicFragmentWise, __assign({}, coreProps, { ref: ref }));
 });

package/build/index.js

@@ -1,4 +1,4 @@
 import { makeHttpClient } from '@wise/dynamic-flow-client';
 export { translations, JsonSchemaForm, isValidSchema } from '@wise/dynamic-flow-client';
-export { DynamicFlowLegacy as DynamicFlow, DynamicFlowLegacy, DynamicFlowRevamp, } from './dynamicFlow/DynamicFlow';
+export { DynamicFlowLegacy as DynamicFlow, DynamicFlowLegacy, DynamicFlowRevamp, DynamicFragment, } from './dynamicFlow/DynamicFlow';
 export var makeCustomFetch = makeHttpClient;

package/build/main.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   DynamicFlow: () => DynamicFlowLegacy,
   DynamicFlowLegacy: () => DynamicFlowLegacy,
   DynamicFlowRevamp: () => DynamicFlowRevamp,
+  DynamicFragment: () => DynamicFragment,
   JsonSchemaForm: () => import_dynamic_flow_client3.JsonSchemaForm,
   isValidSchema: () => import_dynamic_flow_client3.isValidSchema,
   makeCustomFetch: () => makeCustomFetch,
@@ -58,10 +59,15 @@ function DynamicFlowLegacy(props) {
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlow, __spreadValues({}, coreProps));
 }
-var DynamicFlowRevamp = (0, import_react.forwardRef)(function DynamicFlowRevamp2(props, ref) {
+function DynamicFlowRevamp(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlowRevamp, __spreadValues({ ref }, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlowRevamp, __spreadValues({}, coreProps));
+}
+var DynamicFragment = (0, import_react.forwardRef)(function DynamicFragment2(props, ref) {
+  const { customFetch = globalThis.fetch } = props;
+  const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFragmentWise, __spreadProps(__spreadValues({}, coreProps), { ref }));
 });
 
 // src/index.ts

package/build/main.min.js

@@ -1 +1 @@
-"use strict";var m=Object.defineProperty,f=Object.defineProperties,C=Object.getOwnPropertyDescriptor,R=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertyNames,s=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var w=(t,o,i)=>o in t?m(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i,n=(t,o)=>{for(var i in o||(o={}))F.call(o,i)&&w(t,i,o[i]);if(s)for(var i of s(o))g.call(o,i)&&w(t,i,o[i]);return t},p=(t,o)=>f(t,R(o));var d=(t,o)=>{for(var i in o)m(t,i,{get:o[i],enumerable:!0})},L=(t,o,i,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of v(o))!F.call(t,e)&&e!==i&&m(t,e,{get:()=>o[e],enumerable:!(c=C(o,e))||c.enumerable});return t};var u=t=>L(m({},"__esModule",{value:!0}),t);var I={};d(I,{DynamicFlow:()=>r,DynamicFlowLegacy:()=>r,DynamicFlowRevamp:()=>h,JsonSchemaForm:()=>a.JsonSchemaForm,isValidSchema:()=>a.isValidSchema,makeCustomFetch:()=>x,translations:()=>a.translations});module.exports=u(I);var P=require("@wise/dynamic-flow-client"),a=require("@wise/dynamic-flow-client");var l=require("@wise/dynamic-flow-client"),D=require("react");var y=require("react/jsx-runtime");function r(t){let{customFetch:o=globalThis.fetch}=t,i=p(n({},t),{httpClient:o});return(0,y.jsx)(l.DynamicFlow,n({},i))}var h=(0,D.forwardRef)(function(o,i){let{customFetch:c=globalThis.fetch}=o,e=p(n({},o),{httpClient:c});return(0,y.jsx)(l.DynamicFlowRevamp,n({ref:i},e))});var x=P.makeHttpClient;
+"use strict";var p=Object.defineProperty,g=Object.defineProperties,C=Object.getOwnPropertyDescriptor,R=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertyNames,s=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var F=(t,o,e)=>o in t?p(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,a=(t,o)=>{for(var e in o||(o={}))w.call(o,e)&&F(t,e,o[e]);if(s)for(var e of s(o))u.call(o,e)&&F(t,e,o[e]);return t},c=(t,o)=>g(t,R(o));var d=(t,o)=>{for(var e in o)p(t,e,{get:o[e],enumerable:!0})},L=(t,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of v(o))!w.call(t,i)&&i!==e&&p(t,i,{get:()=>o[i],enumerable:!(r=C(o,i))||r.enumerable});return t};var W=t=>L(p({},"__esModule",{value:!0}),t);var I={};d(I,{DynamicFlow:()=>y,DynamicFlowLegacy:()=>y,DynamicFlowRevamp:()=>h,DynamicFragment:()=>P,JsonSchemaForm:()=>m.JsonSchemaForm,isValidSchema:()=>m.isValidSchema,makeCustomFetch:()=>x,translations:()=>m.translations});module.exports=W(I);var f=require("@wise/dynamic-flow-client"),m=require("@wise/dynamic-flow-client");var n=require("@wise/dynamic-flow-client"),D=require("react");var l=require("react/jsx-runtime");function y(t){let{customFetch:o=globalThis.fetch}=t,e=c(a({},t),{httpClient:o});return(0,l.jsx)(n.DynamicFlow,a({},e))}function h(t){let{customFetch:o=globalThis.fetch}=t,e=c(a({},t),{httpClient:o});return(0,l.jsx)(n.DynamicFlowRevamp,a({},e))}var P=(0,D.forwardRef)(function(o,e){let{customFetch:r=globalThis.fetch}=o,i=c(a({},o),{httpClient:r});return(0,l.jsx)(n.DynamicFragmentWise,c(a({},i),{ref:e}))});var x=f.makeHttpClient;

package/build/main.mjs

@@ -25,7 +25,8 @@ import { translations, JsonSchemaForm, isValidSchema } from "@wise/dynamic-flow-
 // src/dynamicFlow/DynamicFlow.tsx
 import {
   DynamicFlowRevamp as DynamicFlowCoreRevamp,
-  DynamicFlow as DynamicFlowCoreLegacy
+  DynamicFlow as DynamicFlowCoreLegacy,
+  DynamicFragmentWise
 } from "@wise/dynamic-flow-client";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -34,10 +35,15 @@ function DynamicFlowLegacy(props) {
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
   return /* @__PURE__ */ jsx(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
 }
-var DynamicFlowRevamp = forwardRef(function DynamicFlowRevamp2(props, ref) {
+function DynamicFlowRevamp(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ jsx(DynamicFlowCoreRevamp, __spreadValues({ ref }, coreProps));
+  return /* @__PURE__ */ jsx(DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
+}
+var DynamicFragment = forwardRef(function DynamicFragment2(props, ref) {
+  const { customFetch = globalThis.fetch } = props;
+  const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
+  return /* @__PURE__ */ jsx(DynamicFragmentWise, __spreadProps(__spreadValues({}, coreProps), { ref }));
 });
 
 // src/index.ts
@@ -46,6 +52,7 @@ export {
   DynamicFlowLegacy as DynamicFlow,
   DynamicFlowLegacy,
   DynamicFlowRevamp,
+  DynamicFragment,
   JsonSchemaForm,
   isValidSchema,
   makeCustomFetch,

package/build/stories/{DynamicFlowWithRef.story.js → DynamicFragment.story.js}

@@ -45,56 +45,86 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable no-nested-ternary */
 import { action } from '@storybook/addon-actions';
-import { layouts, features, examples, schemas } from '@wise/dynamic-flow-fixtures';
-import { fixtureHttpClient } from './utils/fixtureHttpClient';
-import { useRef } from 'react';
 import { Button } from '@transferwise/components';
-import { DynamicFlowRevamp } from '../dynamicFlow/DynamicFlow';
-var fixtures = __assign(__assign(__assign(__assign({}, examples), schemas), layouts), features);
-function DynamicFlowWithRef(_a) {
+import { useRef, useState } from 'react';
+import { DynamicFragment } from '..';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+var step = {
+    id: 'dynamic-fragment-story',
+    title: 'Dynamic Fragment',
+    schemas: [
+        {
+            $id: '#form',
+            type: 'object',
+            displayOrder: ['name', 'city'],
+            required: ['name'],
+            properties: {
+                name: { type: 'string', title: 'Name', minLength: 2 },
+                city: {
+                    title: 'City',
+                    oneOf: [
+                        { title: 'London', const: 'London', icon: { name: 'flag-gb' } },
+                        { title: 'Paris', const: 'Paris', icon: { name: 'flag-fr' } },
+                        { title: 'New York', const: 'New York', icon: { name: 'flag-us' } },
+                    ],
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#form',
+        },
+    ],
+};
+function DynamicFragmentStory() {
     var _this = this;
-    var _b = _a.initialStepName, initialStepName = _b === void 0 ? '' : _b;
-    var selectedStep = (fixtures[initialStepName] || {});
     var ref = useRef(null);
     var props = {
         flowId: 'storybook',
+        analyticsId: 'storybook',
         customFetch: fixtureHttpClient,
         onCompletion: action('onCompletion'),
+        onValueChange: action('onValueChange'),
         onError: action('onError'),
         onEvent: action('onEvent'),
         onLog: action('onLog'),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DynamicFlowRevamp, __assign({ ref: ref, initialStep: selectedStep }, props)), _jsx(Button, { onClick: function () { return __awaiter(_this, void 0, void 0, function () {
-                    var _a;
-                    var _b, _c, _d;
-                    return __generator(this, function (_e) {
-                        switch (_e.label) {
-                            case 0:
-                                _a = action('getValue');
-                                return [4 /*yield*/, ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.getValue())];
+    var _a = useState(''), currentValue = _a[0], setCurrentValue = _a[1];
+    var _b = useState(null), isValid = _b[0], setValid = _b[1];
+    var backgroundColor = isValid === null ? '#eeeeee' : isValid ? '#eeffee' : '#ffeeee';
+    var validityText = isValid === null ? '' : isValid ? '✅ valid\n\n' : '❌ invalid\n\n';
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicFragment, __assign({ ref: ref }, props, { initialStep: step, onValueChange: function () { return __awaiter(_this, void 0, void 0, function () {
+                    var newValue;
+                    var _a, _b;
+                    return __generator(this, function (_c) {
+                        switch (_c.label) {
+                            case 0: return [4 /*yield*/, ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getValue())];
                             case 1:
-                                _a.apply(void 0, [(_c = (_e.sent())) !== null && _c !== void 0 ? _c : null]);
-                                action('validate')((_d = ref.current) === null || _d === void 0 ? void 0 : _d.validate());
+                                newValue = (_b = (_c.sent())) !== null && _b !== void 0 ? _b : null;
+                                setCurrentValue(JSON.stringify(newValue, null, 2));
                                 return [2 /*return*/];
                         }
                     });
-                }); }, children: "Log value" })] }));
+                }); } }), JSON.stringify(step)), _jsx(Button, { onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                    var ok;
+                    var _a, _b;
+                    return __generator(this, function (_c) {
+                        ok = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : false;
+                        setValid(ok);
+                        return [2 /*return*/];
+                    });
+                }); }, children: "validate()" }), _jsx("hr", {}), _jsxs("pre", { style: { backgroundColor: backgroundColor }, children: [validityText, currentValue] })] }));
 }
 var meta = {
-    title: 'Dynamic Flow With Ref',
-    component: DynamicFlowWithRef,
+    title: 'Dynamic Fragment',
+    component: DynamicFragmentStory,
 };
 export var AllFixtures = {
-    argTypes: {
-        initialStepName: {
-            label: 'Initial Step',
-            control: 'select',
-            options: Object.keys(fixtures),
-        },
-    },
-    args: { initialStepName: Object.keys(fixtures)[1] },
     parameters: {
         chromatic: { disableSnapshot: true },
     },

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type DynamicFlowProps as DynamicFlowCoreLegacyProps, type DynamicFlowRevampProps as DynamicFlowCoreRevampProps, type DynamicFlowRevampPropsWithInitialAction, type DynamicFlowRevampPropsWithInitialStep, type DynamicFlowController } from '@wise/dynamic-flow-client';
+import { type DynamicFlowProps as DynamicFlowCoreLegacyProps, type DynamicFlowRevampProps as DynamicFlowCoreRevampProps, type DynamicFlowRevampPropsWithInitialAction, type DynamicFlowRevampPropsWithInitialStep, type DynamicFragmentController } from '@wise/dynamic-flow-client';
 import type { DynamicFlowPropsWithInitialAction, DynamicFlowPropsWithInitialStep } from '@wise/dynamic-flow-client/build/types/legacy/dynamic-flow-types';
 export type DynamicFlowLegacyProps = (Omit<DynamicFlowPropsWithInitialAction, 'httpClient'> | Omit<DynamicFlowPropsWithInitialStep, 'httpClient'>) & {
     customFetch?: DynamicFlowCoreLegacyProps['httpClient'];
@@ -8,4 +8,12 @@ export type DynamicFlowRevampProps = (Omit<DynamicFlowRevampPropsWithInitialActi
     customFetch?: DynamicFlowCoreRevampProps['httpClient'];
 };
 export declare function DynamicFlowLegacy(props: DynamicFlowLegacyProps): JSX.Element;
-export declare const DynamicFlowRevamp: import("react").ForwardRefExoticComponent<DynamicFlowRevampProps & import("react").RefAttributes<DynamicFlowController>>;
+export declare function DynamicFlowRevamp(props: DynamicFlowRevampProps): JSX.Element;
+/**
+ * DynamicFragment is like DynamicFlowRevamp, but it also accepts a ForwardedRef.
+ * This ref conforms to the DynamicFragmentController type, containing two functions: `getValue` and `validate`.
+ * @experimental This component may be changed in the future without notice.
+ */
+export declare const DynamicFragment: import("react").ForwardRefExoticComponent<(DynamicFlowRevampProps & {
+    onValueChange?: (() => void) | undefined;
+}) & import("react").RefAttributes<DynamicFragmentController>>;

package/build/types/index.d.ts

@@ -1,7 +1,5 @@
-import { type DynamicFlowController } from '@wise/dynamic-flow-client';
-export type { DynamicFlowProps, Step, InitialAction } from '@wise/dynamic-flow-client';
+export type { DynamicFlowProps, Step, InitialAction, DynamicFragmentController, } from '@wise/dynamic-flow-client';
 export { translations, JsonSchemaForm, isValidSchema } from '@wise/dynamic-flow-client';
 export type { DynamicFlowLegacyProps as WiseDynamicFlowProps, DynamicFlowLegacyProps, DynamicFlowRevampProps, } from './dynamicFlow/DynamicFlow';
-export { DynamicFlowLegacy as DynamicFlow, DynamicFlowLegacy, DynamicFlowRevamp, } from './dynamicFlow/DynamicFlow';
+export { DynamicFlowLegacy as DynamicFlow, DynamicFlowLegacy, DynamicFlowRevamp, DynamicFragment, } from './dynamicFlow/DynamicFlow';
 export declare const makeCustomFetch: (baseUrl: string, additionalHeaders?: HeadersInit | undefined) => typeof fetch;
-export type { DynamicFlowController };

package/build/types/stories/DynamicFragment.story.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Meta, StoryObj } from '@storybook/react';
+declare function DynamicFragmentStory(): JSX.Element;
+declare const meta: Meta<typeof DynamicFragmentStory>;
+export declare const AllFixtures: StoryObj<typeof DynamicFragmentStory>;
+export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "3.9.0-experimental-bd037e3",
+  "version": "3.9.0-experimental-90bdf26",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -81,7 +81,7 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "3.9.0-experimental-bd037e3"
+    "@wise/dynamic-flow-client": "3.9.0-experimental-90bdf26"
   },
   "scripts": {
     "dev": "storybook dev -p 3005",

package/build/types/stories/DynamicFlowWithRef.story.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj, Meta } from '@storybook/react';
-declare function DynamicFlowWithRef({ initialStepName }: {
-    initialStepName?: string | undefined;
-}): JSX.Element;
-declare const meta: Meta<typeof DynamicFlowWithRef>;
-export declare const AllFixtures: StoryObj<typeof DynamicFlowWithRef>;
-export default meta;