@wise/dynamic-flow-client 3.17.1 → 3.18.1

package/build/main.mjs

@@ -138,12 +138,12 @@ var init_clsx = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.15.0_@types+react@18.3.4_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.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_93a0c34e_esm = __esm({
-  "../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.15.0_@types+react@18.3.4_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.esm.js"() {
+  "../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index-93a0c34e.esm.js"() {
     "use strict";
     init_clsx();
     unknownFlagName = "wise";
@@ -1628,9 +1628,9 @@ var markdownComponentToProps = ({
 });
 
 // src/revamp/renderers/mappers/modalComponentToProps.ts
-var modalComponentToProps = ({ control, margin, trigger }, components) => ({
+var modalComponentToProps = ({ content, control, margin, trigger }, components) => ({
   type: "modal",
-  content: { components },
+  content: { components, title: content.title },
   control,
   margin,
   trigger
@@ -8018,7 +8018,7 @@ var createAllOfComponent = (allOfProps) => {
       return getLocalValues(this.components);
     },
     validate() {
-      return validateComponents(this.getChildren());
+      return hidden ? true : validateComponents(this.getChildren());
     }
   };
 };
@@ -8218,82 +8218,29 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   );
 };
 
-// src/revamp/domain/components/utils/getComponentForLocalValueKey.ts
-var getComponentForLocalValueKey = (key, component) => {
-  if (component.type === "object") {
-    return component.componentMap[key];
-  }
-  if (component.type === "select") {
-    const selectedChild = component.getSelectedChild();
-    return selectedChild ? getComponentForLocalValueKey(key, selectedChild) : null;
-  }
-  const child = hasChildren(component) ? [...component.getChildren()].reverse().find((c) => {
-    const v = c.getLocalValue();
-    return isObjectLocalValue(v) && key in v;
-  }) : void 0;
-  return child ? getComponentForLocalValueKey(key, child) : null;
-};
-
-// src/revamp/domain/components/utils/isPartialLocalValueMatch.ts
-var isPartialLocalValueMatch = (partialValue, component) => {
-  if (!component) {
-    return false;
-  }
-  const componentValue = component.getLocalValue();
-  if (component.type === "const") {
-    return isExactLocalValueMatch(partialValue, componentValue);
-  }
-  if (isObjectLocalValue(partialValue) && isObjectLocalValue(componentValue)) {
-    return isPartialObjectMatch(partialValue, componentValue, component);
-  }
-  if (isArrayLocalValue(partialValue) && component.type === "tuple") {
-    return isPartialTupleMatch(partialValue, component);
-  }
-  return null;
-};
-var isPartialObjectMatch = (partialValue, componentValue, component) => {
-  const results = getMatchingKeys(partialValue, componentValue).map((key) => {
-    const componentForKey = getComponentForLocalValueKey(key, component);
-    return componentForKey && componentForKey.type === "const" ? isPartialLocalValueMatch(partialValue[key], componentForKey) : null;
-  });
-  if (results.includes(false)) {
-    return false;
-  }
-  if (results.includes(true)) {
-    return true;
+// src/revamp/domain/components/utils/isPartialModelMatch.ts
+var isPartialModelMatch = (localModel, incomingModel) => {
+  if (isArrayModel(localModel) && isArrayModel(incomingModel)) {
+    return localModel.length === incomingModel.length && localModel.every((value, index) => isPartialModelMatch(value, incomingModel[index]));
   }
-  return null;
-};
-var isPartialTupleMatch = (partialValue, component) => {
-  const children = component.getChildren();
-  const shortest = partialValue.length < children.length ? partialValue : children;
-  const results = shortest.map((_value, index) => {
-    if (children[index].type !== "const") {
-      return null;
-    }
-    return isPartialLocalValueMatch(partialValue[index], children[index]);
-  });
-  if (results.includes(false)) {
-    return false;
-  }
-  if (results.includes(true)) {
-    return true;
+  if (isObjectModel(localModel) && isObjectModel(incomingModel)) {
+    const nonNullishKeysInBoth = nonNullishKeys(localModel).filter(
+      (key) => nonNullishKeys(incomingModel).includes(key)
+    );
+    return nonNullishKeysInBoth.length > 0 && nonNullishKeysInBoth.every((key) => isPartialModelMatch(localModel[key], incomingModel[key]));
   }
-  return null;
-};
-var getMatchingKeys = (a, b) => {
-  const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]));
-  return allKeys.filter((key) => !isNullish(a[key]) && !isNullish(b[key]));
+  return localModel === incomingModel;
 };
+var nonNullishKeys = (model) => Object.keys(model).filter((key) => !isNullish(model[key]));
 
 // src/revamp/domain/components/SelectInputComponent.ts
 var createSelectInputComponent = (selectProps, updateComponent) => {
-  const _a = selectProps, { uid, checks, initialValue, options, performRefresh, onValueChange, summariser } = _a, rest = __objRest(_a, ["uid", "checks", "initialValue", "options", "performRefresh", "onValueChange", "summariser"]);
+  const _a = selectProps, { uid, checks, initialModel, options, performRefresh, onValueChange, summariser } = _a, rest = __objRest(_a, ["uid", "checks", "initialModel", "options", "performRefresh", "onValueChange", "summariser"]);
   const children = options.map((option) => option.component);
   const matchingOptions = options.map(
-    (option) => isPartialLocalValueMatch(selectProps.initialValue, option.component)
+    (option) => isPartialModelMatch(option.component.getSubmittableValueSync(), initialModel)
   );
-  const selectedIndex = matchingOptions.filter(isTrue).length === 1 ? matchingOptions.indexOf(true) : null;
+  const selectedIndex = matchingOptions.filter((match) => match).length === 1 ? matchingOptions.indexOf(true) : null;
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const getAndSetValidationErrors = (currentValue) => {
@@ -8361,11 +8308,10 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     }
   });
 };
-var isTrue = (value) => value === true;
 
 // src/revamp/domain/mappers/schema/oneOfSchemaToComponent/oneOfSchemaToComponent.ts
 var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  var _a, _b;
+  var _a;
   const {
     uid,
     localValue,
@@ -8387,7 +8333,7 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
       component: mapSchemaToComponent(
         {
           uid: `${uid}.oneOf-${index}`,
-          schema: supressSchemaTitleAndDescription(childSchema),
+          schema: isFormSectionSchema(childSchema) ? supressSchemaTitleAndDescription(childSchema) : childSchema,
           model: initialModel,
           localValue,
           validationErrors: initialError,
@@ -8398,15 +8344,14 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
     };
   });
   const { getErrorMessageFunctions, updateComponent, trackEvent, onRefresh, onValueChange } = mapperProps;
-  const { default: defaultValue, validationMessages } = schema;
+  const { validationMessages } = schema;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const initialValue = (_b = model != null ? model : defaultValue) != null ? _b : null;
   return createSelectInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       autoComplete: getAutocompleteString(schema.autocompleteHint),
       checks: schema.hidden ? [] : [getRequiredCheck(required, errorMessageFunctions)],
       options,
-      initialValue,
+      initialModel,
       performRefresh: getPerformRefresh(schema, onRefresh),
       onValueChange,
       trackEvent
@@ -8414,6 +8359,7 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
     updateComponent
   );
 };
+var isFormSectionSchema = (schema) => isObjectSchema(schema) || isArrayTupleSchema(schema) || isAllOfSchema(schema);
 var supressSchemaTitleAndDescription = (schema) => {
   const _a = schema, { title, description } = _a, headlessSchema = __objRest(_a, ["title", "description"]);
   return headlessSchema;
@@ -9916,13 +9862,14 @@ var createModalComponent = (modalProps) => __spreadProps(__spreadValues({
 
 // src/revamp/domain/mappers/layout/modalLayoutToComponent.ts
 var modalLayoutToComponent = (uid, { content, control, margin = "md", trigger }, mapperProps) => {
-  const { components } = content;
+  const { components, title } = content;
   return createModalComponent({
     uid,
     content: {
       components: components.map(
         (component, index) => mapLayoutToComponent(`${uid}.modal-${index}`, component, mapperProps)
-      )
+      ),
+      title
     },
     control,
     margin,
@@ -11286,7 +11233,7 @@ var DateInputRenderer_default = DateInputRenderer;
 // ../renderers/src/DecisionRenderer.tsx
 import { NavigationOptionsList, NavigationOption, Header } from "@transferwise/components";
 
-// ../../node_modules/.pnpm/@wise+art@2.14.0_@transferwise+neptune-css@14.15.0_@types+react@18.3.4_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.14.0_@transferwise+neptune-css@14.18.0_@types+react@18.3.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wise/art/dist/index.esm.js
 init_index_93a0c34e_esm();
 init_clsx();
 import "react";
@@ -11623,6 +11570,7 @@ var ModalRenderer = {
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = useState4(false);
+  const { components, title } = content;
   return /* @__PURE__ */ jsxs8("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx32(Button2, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ jsx32(
@@ -11631,7 +11579,8 @@ function DFModal({ content, margin, trigger }) {
         scroll: "content",
         open: visible,
         size: "lg",
-        body: content.components,
+        title,
+        body: components,
         onClose: () => setVisible(false)
       }
     )
@@ -18084,6 +18033,7 @@ function DynamicModal(props) {
         scroll: "content",
         open: visible,
         size: "lg",
+        title: component.content.title,
         body: /* @__PURE__ */ jsx115(
           DynamicLayout_default,
           __spreadProps(__spreadValues({}, props), {

package/build/types/revamp/domain/components/ModalComponent.d.ts

@@ -8,5 +8,6 @@ export type ModalComponent = LayoutComponent & {
 };
 export type ModalContent = {
     components: DomainComponent[];
+    title?: string;
 };
 export declare const createModalComponent: (modalProps: Pick<ModalComponent, "uid" | "content" | "control" | "margin" | "trigger">) => ModalComponent;

package/build/types/revamp/domain/components/SelectInputComponent.d.ts

@@ -1,4 +1,4 @@
-import type { Icon, Image } from '@wise/dynamic-flow-types/build/next';
+import type { Icon, Image, Model } from '@wise/dynamic-flow-types/build/next';
 import type { InputComponent, LocalValue, RepeatableSummary, DomainComponent, UpdateComponent, OnValueChange } from '../types';
 import type { IsInvalidCheck } from '../features/validation/value-checks';
 import type { AnalyticsEventDispatcher } from '../features/events';
@@ -21,7 +21,7 @@ export type SelectInputOption = {
     disabled: boolean;
 };
 export declare const createSelectInputComponent: (selectProps: Pick<SelectInputComponent, "uid" | "id" | "analyticsId" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "help" | "hidden" | "placeholder" | "required" | "title"> & {
-    initialValue: LocalValue;
+    initialModel: Model;
     options: (SelectInputOption & {
         component: DomainComponent;
     })[];

package/build/types/revamp/domain/components/utils/isPartialModelMatch.d.ts

@@ -0,0 +1,2 @@
+import { Model } from '@wise/dynamic-flow-types/build/next';
+export declare const isPartialModelMatch: (localModel: Model, incomingModel: Model) => boolean;

package/build/types/revamp/renderers/mappers/modalComponentToProps.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { ModalComponent } from '../../domain/components/ModalComponent';
 import type { ModalRendererProps } from '@wise/dynamic-flow-renderers';
-export declare const modalComponentToProps: ({ control, margin, trigger }: ModalComponent, components: ReactNode) => ModalRendererProps;
+export declare const modalComponentToProps: ({ content, control, margin, trigger }: ModalComponent, components: ReactNode) => ModalRendererProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.17.1",
+  "version": "3.18.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -34,7 +34,7 @@
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
-    "@chromatic-com/storybook": "1.7.0",
+    "@chromatic-com/storybook": "1.8.0",
     "@formatjs/cli": "^6.2.12",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-actions": "^8.2.9",
@@ -49,16 +49,16 @@
     "@storybook/types": "^8.2.9",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@transferwise/components": "46.65.0",
+    "@transferwise/components": "46.70.2",
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.13.0",
-    "@transferwise/neptune-css": "14.15.0",
+    "@transferwise/neptune-css": "14.18.0",
     "@types/enzyme": "^3.10.18",
     "@types/jest": "29.5.12",
-    "@types/react": "18.3.4",
+    "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@types/react-intl": "3.0.0",
     "@wise/art": "2.14.0",
@@ -72,18 +72,18 @@
     "jest-watch-typeahead": "^2.2.2",
     "nanoid": "5.0.7",
     "npm-run-all2": "6.2.2",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.44",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^15.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.6.8",
     "storybook": "8.2.9",
-    "stylelint": "16.8.2",
+    "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.18.0",
+    "tsx": "4.19.0",
     "typescript": "5.5.4",
     "webpack": "5.94.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
@@ -104,7 +104,7 @@
     "nanoid": "5.0.7",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.20.1"
+    "@wise/dynamic-flow-types": "2.21.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",

package/build/types/revamp/domain/components/utils/getComponentForLocalValueKey.d.ts

@@ -1,7 +0,0 @@
-import type { DomainComponent } from '../../types';
-/**
- * Returns a component that is a child (or grandchild, etc.) of the given component,
- * which is "responsible" for the value of the given key,
- * or null if there isn't any.
- */
-export declare const getComponentForLocalValueKey: (key: string, component: DomainComponent) => DomainComponent | null;

package/build/types/revamp/domain/components/utils/isPartialLocalValueMatch.d.ts

@@ -1,2 +0,0 @@
-import type { DomainComponent, LocalValue } from '../../types';
-export declare const isPartialLocalValueMatch: (partialValue: LocalValue, component: DomainComponent | null) => boolean | null;