@wise/dynamic-flow-client 4.7.1 → 4.8.1

package/build/i18n/nl.json

@@ -6,7 +6,7 @@
   "dynamicFlows.ArraySchema.minItemsError": "Voeg minimaal {minItems} toe.",
   "dynamicFlows.ArraySchema.removeItem": "Verwijderen",
   "dynamicFlows.CameraCapture.CameraConnectionIssue.action": "Opnieuw proberen",
-  "dynamicFlows.CameraCapture.CameraConnectionIssue.paragraph": "Controleer of de camera verbonden is en probeer opnieuw.",
+  "dynamicFlows.CameraCapture.CameraConnectionIssue.paragraph": "Controleer of de camera verbonden is en probeer het opnieuw.",
   "dynamicFlows.CameraCapture.CameraConnectionIssue.title": "We hebben geen toegang tot je camera",
   "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "Je browser ondersteunt geen camera's. Probeer een andere browser of apparaat of download onze mobiele app.",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "Camera wordt niet ondersteund",
@@ -29,22 +29,22 @@
   "dynamicFlows.ControlFeedback.type": "Onjuist type",
   "dynamicFlows.DefaultErrorMessages.required": "Vul dit veld in.",
   "dynamicFlows.DynamicExternal.retryTitle": "Venster opnieuw openen",
-  "dynamicFlows.DynamicParagraph.copied": "Naar klembord gekopiëerd",
+  "dynamicFlows.DynamicParagraph.copied": "Naar klembord gekopieerd",
   "dynamicFlows.DynamicParagraph.copy": "Kopiëren",
   "dynamicFlows.ErrorBoundary.errorAlert": "Er is iets misgegaan.",
   "dynamicFlows.ErrorBoundary.retry": "Opnieuw proberen",
   "dynamicFlows.ExternalConfirmation.cancel": "Annuleren",
   "dynamicFlows.ExternalConfirmation.description": "Bevestig dat je **{origin}** in een nieuw browsertabblad wilt openen.",
   "dynamicFlows.ExternalConfirmation.open": "In nieuw tabblad openen",
-  "dynamicFlows.ExternalConfirmation.title": "Bevestig",
+  "dynamicFlows.ExternalConfirmation.title": "Bevestigen",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Het bestand is te groot. Upload een kleiner bestand.",
   "dynamicFlows.FileUploadSchema.wrongFileTypeError": "De bestandsindeling wordt niet ondersteund. Upload een ander bestand.",
   "dynamicFlows.Help.ariaLabel": "Klik hier voor meer informatie.",
   "dynamicFlows.MultiSelect.summary": "{first} en nog {count}",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Het bestand is te groot. Upload een kleiner bestand.",
   "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "Upload {maxItems} of minder bestanden.",
-  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Upload mimimaal {minItems} bestand(en).",
-  "dynamicFlows.PersistAsyncSchema.genericError": "Er ging iets mis, probeer het a. u. b. opnieuw.",
+  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Upload minimaal {minItems} bestand(en).",
+  "dynamicFlows.PersistAsyncSchema.genericError": "Er is iets misgegaan, probeer het opnieuw.",
   "dynamicFlows.ReadOnlySchema.no": "Nee",
   "dynamicFlows.ReadOnlySchema.yes": "Ja",
   "dynamicFlows.SearchLayout.loading": "Laden..."

package/build/main.css

@@ -287,39 +287,63 @@ button.df-back-btn {
   height: auto;
   width: 100%;
 }
-/* narrow screens */
+/* wide screens (or default) */
 .df-image.xs img {
-  width: 50px;
+  width: 100px;
 }
 .df-image.sm img {
-  width: 100px;
+  width: 200px;
 }
 .df-image.md img {
-  width: 200px;
+  width: 300px;
 }
 .df-image.lg img {
-  width: 300px;
+  width: 500px;
 }
-/* wide screens */
-@media (width >=576px) {
+.df-image.xl img {
+  max-width: 600px;
+}
+/* narrow screens */
+@media (width <576px) {
   .df-image.xs img {
-    width: 100px;
+    width: 50px;
   }
 
   .df-image.sm img {
-    width: 200px;
+    width: 100px;
   }
 
   .df-image.md img {
-    width: 300px;
+    width: 200px;
   }
 
   .df-image.lg img {
-    width: 500px;
+    width: 300px;
+  }
+}
+/**
+  * This speficies the container for container queries about width.
+  * We don't use it by default, but integrations can specify it using the className prop in the DF component.
+ */
+.df-prefer-container-queries {
+  container-type: inline-size;
+}
+/* narrow container */
+@container (max-width: 576px) {
+  .df-image.xs img {
+    width: 50px;
   }
 
-  .df-image.xl img {
-    max-width: 600px;
+  .df-image.sm img {
+    width: 100px;
+  }
+
+  .df-image.md img {
+    width: 200px;
+  }
+
+  .df-image.lg img {
+    width: 300px;
   }
 }
 .df-back-btn .tw-avatar__content {

package/build/main.js

@@ -1100,6 +1100,8 @@ function getChildren(node) {
       return node.editableItemProps ? [node.editableItemProps] : [];
     case "input-select":
       return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
     case "alert":
     case "button":
     case "input-checkbox":
@@ -1791,6 +1793,22 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/revamp/renderers/mappers/tabsComponentToProps.ts
+var tabsComponentToProps = (component, rendererMapperProps) => {
+  const tabs = component.tabs.map(({ components, tag, title }) => {
+    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return {
+      title,
+      tag,
+      childrenProps,
+      children: childrenProps.map(rendererMapperProps.render)
+    };
+  });
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "control", "margin")), rendererMapperProps), {
+    tabs
+  });
+};
+
 // src/revamp/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1881,6 +1899,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return selectInputComponentToProps(component, rendererMapperProps);
     case "status-list":
       return statusListComponentToProps(component, rendererMapperProps);
+    case "tabs":
+      return tabsComponentToProps(component, rendererMapperProps);
     case "text":
       return textInputComponentToProps(component, rendererMapperProps);
     case "tuple":
@@ -2868,6 +2888,30 @@ var sectionLayoutToComponent = (uid, { control, title, components, callToAction,
   });
 };
 
+// src/revamp/domain/components/TabsComponent.ts
+var createTabsComponent = (tabsProps) => __spreadProps(__spreadValues({}, tabsProps), {
+  type: "tabs"
+});
+
+// src/revamp/domain/mappers/layout/tabsLayoutToComponent.ts
+var tabsLayoutToComponent = (uid, { control, margin = "md", tabs }, mapperProps, schemaComponents) => createTabsComponent({
+  uid,
+  control,
+  margin,
+  tabs: tabs.map(({ components, tag, title }, tabIndex) => ({
+    tag,
+    title,
+    components: components.map(
+      (c, componentIndex) => mapLayoutToComponent(
+        `${uid}.tabs-${tabIndex}-${componentIndex}`,
+        c,
+        mapperProps,
+        schemaComponents
+      )
+    )
+  }))
+});
+
 // src/revamp/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2911,6 +2955,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return sectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "status-list":
       return statusListLayoutToComponent(uid, layout, mapperProps);
+    case "tabs":
+      return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }

package/build/main.mjs

@@ -1057,6 +1057,8 @@ function getChildren(node) {
       return node.editableItemProps ? [node.editableItemProps] : [];
     case "input-select":
       return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
     case "alert":
     case "button":
     case "input-checkbox":
@@ -1748,6 +1750,22 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/revamp/renderers/mappers/tabsComponentToProps.ts
+var tabsComponentToProps = (component, rendererMapperProps) => {
+  const tabs = component.tabs.map(({ components, tag, title }) => {
+    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return {
+      title,
+      tag,
+      childrenProps,
+      children: childrenProps.map(rendererMapperProps.render)
+    };
+  });
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "control", "margin")), rendererMapperProps), {
+    tabs
+  });
+};
+
 // src/revamp/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1838,6 +1856,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return selectInputComponentToProps(component, rendererMapperProps);
     case "status-list":
       return statusListComponentToProps(component, rendererMapperProps);
+    case "tabs":
+      return tabsComponentToProps(component, rendererMapperProps);
     case "text":
       return textInputComponentToProps(component, rendererMapperProps);
     case "tuple":
@@ -2825,6 +2845,30 @@ var sectionLayoutToComponent = (uid, { control, title, components, callToAction,
   });
 };
 
+// src/revamp/domain/components/TabsComponent.ts
+var createTabsComponent = (tabsProps) => __spreadProps(__spreadValues({}, tabsProps), {
+  type: "tabs"
+});
+
+// src/revamp/domain/mappers/layout/tabsLayoutToComponent.ts
+var tabsLayoutToComponent = (uid, { control, margin = "md", tabs }, mapperProps, schemaComponents) => createTabsComponent({
+  uid,
+  control,
+  margin,
+  tabs: tabs.map(({ components, tag, title }, tabIndex) => ({
+    tag,
+    title,
+    components: components.map(
+      (c, componentIndex) => mapLayoutToComponent(
+        `${uid}.tabs-${tabIndex}-${componentIndex}`,
+        c,
+        mapperProps,
+        schemaComponents
+      )
+    )
+  }))
+});
+
 // src/revamp/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2868,6 +2912,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return sectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "status-list":
       return statusListLayoutToComponent(uid, layout, mapperProps);
+    case "tabs":
+      return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }

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

@@ -0,0 +1,11 @@
+import { BaseLayoutComponent, DomainComponent } from '../types';
+export type TabsComponent = BaseLayoutComponent & {
+    type: 'tabs';
+    tabs: Tab[];
+};
+export type Tab = {
+    title: string;
+    components: DomainComponent[];
+    tag?: string;
+};
+export declare const createTabsComponent: (tabsProps: Pick<TabsComponent, "uid" | "control" | "margin" | "tabs">) => TabsComponent;

package/build/types/revamp/domain/mappers/layout/tabsLayoutToComponent.d.ts

@@ -0,0 +1,5 @@
+import { TabsLayout } from '@wise/dynamic-flow-types/build/next';
+import { TabsComponent } from '../../components/TabsComponent';
+import { MapperProps } from '../schema/types';
+import { SchemaComponent } from '../../types';
+export declare const tabsLayoutToComponent: (uid: string, { control, margin, tabs }: TabsLayout, mapperProps: MapperProps, schemaComponents: SchemaComponent[]) => TabsComponent;

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

@@ -38,9 +38,10 @@ import type { StepDomainComponent } from './components/step/StepDomainComponent'
 import type { TextInputComponent } from './components/TextInputComponent';
 import type { TupleComponent } from './components/TupleComponent';
 import type { UploadInputComponent } from './components/UploadInputComponent';
+import { TabsComponent } from './components/TabsComponent';
 export type DomainComponent = SchemaComponent | LayoutComponent | RootDomainComponent | StepDomainComponent;
 export type SchemaComponent = PersistAsyncComponent | AllOfComponent | BooleanInputComponent | ConstComponent | DateInputComponent | IntegerInputComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | RepeatableComponent | SelectInputComponent | TextInputComponent | TupleComponent | UploadInputComponent;
-export type LayoutComponent = AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | ParagraphComponent | ReviewComponent | SearchComponent | SectionComponent | StatusListComponent;
+export type LayoutComponent = AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | ParagraphComponent | ReviewComponent | SearchComponent | SectionComponent | StatusListComponent | TabsComponent;
 export type LocalValue = LocalValuePrimitive | LocalValueObject | LocalValueArray;
 export type LocalValuePrimitive = string | number | boolean | File | null;
 export interface LocalValueObject extends Record<string, LocalValuePrimitive | LocalValueObject | LocalValueArray> {

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

@@ -0,0 +1,4 @@
+import { TabsRendererProps } from '@wise/dynamic-flow-types/build/renderers';
+import { TabsComponent } from '../../domain/components/TabsComponent';
+import { RendererMapperProps } from './componentToRendererProps';
+export declare const tabsComponentToProps: (component: TabsComponent, rendererMapperProps: RendererMapperProps) => TabsRendererProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.7.1",
+  "version": "4.8.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -36,43 +36,43 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
-    "@chromatic-com/storybook": "4.0.0",
+    "@chromatic-com/storybook": "4.0.1",
     "@formatjs/cli": "^6.7.2",
-    "@storybook/addon-a11y": "^9.0.10",
-    "@storybook/addon-docs": "^9.0.10",
-    "@storybook/addon-links": "^9.0.10",
-    "@storybook/react-vite": "9.0.10",
+    "@storybook/addon-a11y": "^9.0.12",
+    "@storybook/addon-docs": "^9.0.12",
+    "@storybook/addon-links": "^9.0.12",
+    "@storybook/react-vite": "9.0.12",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@transferwise/components": "46.98.1",
     "@transferwise/formatting": "^2.13.1",
-    "@transferwise/icons": "3.22.0",
+    "@transferwise/icons": "3.22.2",
     "@transferwise/neptune-css": "14.24.4",
     "@types/jest": "29.5.14",
-    "@types/node": "22.15.31",
+    "@types/node": "22.15.32",
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
     "@wise/art": "2.21.2",
     "@wise/components-theming": "^1.6.3",
-    "babel-jest": "29.7.0",
+    "babel-jest": "30.0.2",
     "esbuild": "0.25.5",
-    "eslint-plugin-storybook": "9.0.10",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "eslint-plugin-storybook": "9.0.12",
+    "jest": "30.0.2",
+    "jest-environment-jsdom": "30.0.2",
     "jest-fetch-mock": "^3.0.3",
-    "jest-watch-typeahead": "^2.2.2",
+    "jest-watch-typeahead": "^3.0.1",
     "npm-run-all2": "7.0.2",
-    "postcss": "^8.5.5",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^9.0.10",
-    "stylelint": "16.20.0",
+    "storybook": "^9.0.12",
+    "stylelint": "16.21.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
@@ -95,7 +95,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.5.1"
+    "@wise/dynamic-flow-types": "3.6.1"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",