@wise/dynamic-flow-client-internal 5.29.0-experimental-9e4b087 → 5.29.0

package/build/main.css

@@ -387,31 +387,6 @@
 .df-prefer-container-queries {
   container-type: inline-size;
 }
-
-.df-ssn-input-wrapper {
-  position: relative;
-}
-
-.df-ssn-input {
-  padding-right: 3.5rem;
-}
-
-.df-ssn-input-toggle {
-  align-items: center;
-  background: transparent;
-  border: 0;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 3.5rem;
-}
-
 .df-context-menu {
   position: fixed;
   z-index: 10;

package/build/main.js

@@ -146,7 +146,7 @@ var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.28.4" : "0.0.0"
+  typeof process !== "undefined" ? "5.29.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -336,7 +336,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -1808,6 +1808,10 @@ var isIOSWebKit = () => {
   const mtp = navigator.maxTouchPoints;
   return _isIOSResult = navigator.platform === "MacIntel" && mtp !== void 0 && mtp > 0;
 };
+var getRect = (element) => {
+  const { offsetWidth, offsetHeight } = element;
+  return { width: offsetWidth, height: offsetHeight };
+};
 var defaultKeyExtractor = (index) => index;
 var defaultRangeExtractor = (range) => {
   const start = Math.max(range.startIndex - range.overscan, 0);
@@ -1819,6 +1823,43 @@ var defaultRangeExtractor = (range) => {
   }
   return arr;
 };
+var observeElementRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  const handler = (rect) => {
+    const { width, height } = rect;
+    cb({ width: Math.round(width), height: Math.round(height) });
+  };
+  handler(getRect(element));
+  if (!targetWindow.ResizeObserver) {
+    return () => {
+    };
+  }
+  const observer = new targetWindow.ResizeObserver((entries) => {
+    const run = () => {
+      const entry = entries[0];
+      if (entry == null ? void 0 : entry.borderBoxSize) {
+        const box = entry.borderBoxSize[0];
+        if (box) {
+          handler({ width: box.inlineSize, height: box.blockSize });
+          return;
+        }
+      }
+      handler(getRect(element));
+    };
+    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => {
+    observer.unobserve(element);
+  };
+};
 var addEventListenerOptions = {
   passive: true
 };
@@ -1872,6 +1913,10 @@ var observeOffset = (instance, cb, readOffset) => {
     fallback == null ? void 0 : fallback.cancel();
   };
 };
+var observeElementOffset = (instance, cb) => observeOffset(instance, cb, (el) => {
+  const { horizontal, isRtl } = instance.options;
+  return horizontal ? el.scrollLeft * (isRtl && -1 || 1) : el.scrollTop;
+});
 var observeWindowOffset = (instance, cb) => observeOffset(
   instance,
   cb,
@@ -1914,6 +1959,7 @@ var scrollWithAdjustments = (offset, {
   });
 };
 var windowScroll = scrollWithAdjustments;
+var elementScroll = scrollWithAdjustments;
 var Virtualizer = class {
   constructor(opts) {
     this.unsubs = [];
@@ -3156,6 +3202,13 @@ function useVirtualizerBase(_a) {
   });
   return instance;
 }
+function useVirtualizer(options) {
+  return useVirtualizerBase(__spreadValues({
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll
+  }, options));
+}
 function useWindowVirtualizer(options) {
   return useVirtualizerBase(__spreadValues({
     getScrollElement: () => typeof document !== "undefined" ? window : null,
@@ -3228,7 +3281,7 @@ var FooterWithScrollButton = ({ footer }) => {
     ] })
   ] });
 };
-var useIsElementVisible = (elementRef) => {
+var useIsElementVisible = (elementRef, root = null) => {
   const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
   (0, import_react8.useEffect)(() => {
     const element = elementRef.current;
@@ -3237,11 +3290,11 @@ var useIsElementVisible = (elementRef) => {
       ([entry]) => {
         setIsVisible(entry.isIntersecting);
       },
-      { rootMargin: "1px" }
+      { root, rootMargin: "1px" }
     );
     observer.observe(element);
     return () => observer.disconnect();
-  }, [elementRef]);
+  }, [elementRef, root]);
   return isVisible;
 };
 
@@ -3263,12 +3316,40 @@ var collection_messages_default = (0, import_react_intl8.defineMessages)({
   }
 });
 
+// ../renderers/src/CollectionRenderer/components/getScrollableAncestor.ts
+var SCROLLABLE_OVERFLOW_VALUES = /* @__PURE__ */ new Set(["auto", "overlay", "scroll"]);
+var getScrollableAncestor = (element) => {
+  var _a;
+  const view = element == null ? void 0 : element.ownerDocument.defaultView;
+  let ancestor = (_a = element == null ? void 0 : element.parentElement) != null ? _a : null;
+  if (!view) {
+    return null;
+  }
+  while (ancestor) {
+    const { overflowY } = view.getComputedStyle(ancestor);
+    const hasScrollableOverflow = SCROLLABLE_OVERFLOW_VALUES.has(overflowY);
+    if (hasScrollableOverflow && ancestor.scrollHeight > ancestor.clientHeight) {
+      return ancestor;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return null;
+};
+
 // ../renderers/src/CollectionRenderer/components/ContentComponent.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var ContentComponent = (props) => {
   const { state, status, SectionHeader, Item } = props;
+  const contentRef = (0, import_react9.useRef)(null);
+  const [scrollElement, setScrollElement] = (0, import_react9.useState)(null);
+  (0, import_react9.useLayoutEffect)(() => {
+    const nextScrollElement = getScrollableAncestor(contentRef.current);
+    setScrollElement(
+      (currentScrollElement) => currentScrollElement === nextScrollElement ? currentScrollElement : nextScrollElement
+    );
+  }, []);
   const endOfContentRef = (0, import_react9.useRef)(null);
-  const isBottomVisible = useIsElementVisible(endOfContentRef);
+  const isBottomVisible = useIsElementVisible(endOfContentRef, scrollElement);
   (0, import_react9.useEffect)(() => {
     const shouldAutoLoad = isBottomVisible && status.type === "idle" && state.afterSectionsProps.length === 0;
     if (shouldAutoLoad && status.loadMore) {
@@ -3300,51 +3381,90 @@ var ContentComponent = (props) => {
     var _a, _b;
     listOffsetRef.current = (_b = (_a = listRef.current) == null ? void 0 : _a.offsetTop) != null ? _b : 0;
   });
-  const virtualizer = useWindowVirtualizer({
-    count: stateCount,
-    estimateSize: () => 120,
-    overscan: 10,
-    // eslint-disable-next-line react-hooks/refs
-    scrollMargin: listOffsetRef.current
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: listRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: contentRef, children: [
     state.beforeSections,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      "div",
+    scrollElement ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ElementVirtualizedItems,
       {
-        style: {
-          height: `${virtualizer.getTotalSize()}px`,
-          width: "100%",
-          position: "relative"
-        },
-        children: virtualizer.getVirtualItems().map((item) => {
-          const i = items[item.index];
-          if (!i) {
-            return null;
-          }
-          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            "div",
-            {
-              ref: virtualizer.measureElement,
-              "data-index": item.index,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
-              },
-              children: i.type === "header" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SectionHeader, __spreadValues({}, i)) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Item, __spreadValues({}, i.item))
-            },
-            item.key
-          );
-        })
+        Item,
+        SectionHeader,
+        items,
+        scrollElement,
+        stateCount
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      WindowVirtualizedItems,
+      {
+        Item,
+        SectionHeader,
+        items,
+        stateCount
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: endOfContentRef, className: "d-flex m-x-auto m-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PaginationComponent, { status, state }) }),
     state.afterSections
   ] });
 };
+var WindowVirtualizedItems = (props) => {
+  const { stateCount } = props;
+  const virtualItemsRef = (0, import_react9.useRef)(null);
+  const virtualizer = useWindowVirtualizer({
+    count: stateCount,
+    estimateSize: () => 120,
+    overscan: 10
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VirtualizedItems, __spreadProps(__spreadValues({}, props), { virtualItemsRef, virtualizer }));
+};
+var ElementVirtualizedItems = (props) => {
+  const { scrollElement, stateCount } = props;
+  const virtualItemsRef = (0, import_react9.useRef)(null);
+  const virtualizer = useVirtualizer({
+    count: stateCount,
+    getScrollElement: () => scrollElement,
+    estimateSize: () => 120,
+    overscan: 10
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VirtualizedItems, __spreadProps(__spreadValues({}, props), { virtualItemsRef, virtualizer }));
+};
+var VirtualizedItems = ({
+  Item,
+  SectionHeader,
+  items,
+  virtualItemsRef,
+  virtualizer
+}) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  "div",
+  {
+    ref: virtualItemsRef,
+    style: {
+      height: `${virtualizer.getTotalSize()}px`,
+      width: "100%",
+      position: "relative"
+    },
+    children: virtualizer.getVirtualItems().map((item) => {
+      const i = items[item.index];
+      if (!i) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "div",
+        {
+          ref: virtualizer.measureElement,
+          "data-index": item.index,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+          },
+          children: i.type === "header" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SectionHeader, __spreadValues({}, i)) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Item, __spreadValues({}, i.item))
+        },
+        item.key
+      );
+    })
+  }
+);
 var PaginationComponent = ({
   status,
   state
@@ -6633,8 +6753,6 @@ var import_components69 = require("@transferwise/components");
 
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components68 = require("@transferwise/components");
-var import_icons7 = require("@transferwise/icons");
-var import_react27 = require("react");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
@@ -6650,18 +6768,13 @@ var commonKeys = [
   "value"
 ];
 function VariableTextInput(inputProps) {
-  const { id, value, control, displayFormat, onChange } = inputProps;
+  const { id, value, control, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
-  if (control === "ssn-input" || (displayFormat == null ? void 0 : displayFormat.includes("*"))) {
-    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { maxLength: inputProps.maxLength, onChange }));
-  }
   switch (control) {
     case "email":
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
-    case "ssn-input":
-      return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
@@ -6682,79 +6795,10 @@ function VariableTextInput(inputProps) {
   }
 }
 function TextInput(props) {
-  const _a = props, { control, displayFormat, onChange, type } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange", "type"]);
+  const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
   const InputWithPattern = control === "textarea" ? import_components68.TextareaWithDisplayFormat : import_components68.InputWithDisplayFormat;
   const InputWithoutPattern = control === "textarea" ? import_components68.TextArea : import_components68.Input;
-  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
-}
-function SsnInput(props) {
-  const _a = props, {
-    displayFormat = "",
-    maxLength,
-    onChange,
-    type: _type,
-    value = ""
-  } = _a, commonProps = __objRest(_a, [
-    "displayFormat",
-    "maxLength",
-    "onChange",
-    "type",
-    "value"
-  ]);
-  const [isVisible, setIsVisible] = (0, import_react27.useState)(false);
-  const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
-  const formattedValue = displayFormat ? displayFormat.split("").reduce(
-    ({ display, digitsUsed }, character) => {
-      if (character === "*") {
-        return digitsUsed < value.length ? {
-          display: `${display}${isVisible ? value[digitsUsed] : "\u2022"}`,
-          digitsUsed: digitsUsed + 1
-        } : { display, digitsUsed };
-      }
-      return digitsUsed > 0 && digitsUsed < value.length ? { display: `${display}${character}`, digitsUsed } : { display, digitsUsed };
-    },
-    { display: "", digitsUsed: 0 }
-  ).display : isVisible ? value : "\u2022".repeat(value.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "df-ssn-input-wrapper", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-      "input",
-      __spreadProps(__spreadValues({}, commonProps), {
-        className: "form-control np-form-control np-input np-input--shape-rectangle df-ssn-input",
-        type: "text",
-        inputMode: "numeric",
-        maxLength: displayFormat.length || maxLength,
-        value: formattedValue,
-        onChange: () => void 0,
-        onKeyDown: (event) => {
-          const rawValue = value.replace(/\D/g, "");
-          if (/^\d$/.test(event.key)) {
-            event.preventDefault();
-            if (rawValue.length < maxDigits) {
-              onChange(`${rawValue}${event.key}`);
-            }
-          } else if (event.key === "Backspace") {
-            event.preventDefault();
-            onChange(rawValue.slice(0, -1));
-          }
-        },
-        onPaste: (event) => {
-          event.preventDefault();
-          const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
-          onChange(`${value}${pastedValue}`.replace(/\D/g, "").slice(0, maxDigits));
-        }
-      })
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "df-ssn-input-toggle",
-        "aria-label": isVisible ? "Hide value" : "Show value",
-        onClick: () => setIsVisible((visible) => !visible),
-        children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.EyeShut, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.Eye, { size: 24 })
-      }
-    )
-  ] });
+  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -6966,7 +7010,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_components71 = require("@transferwise/components");
 var import_classnames35 = __toESM(require_classnames());
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -6974,7 +7018,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = (0, import_react28.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react27.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     import_components71.Nudge,
     {
@@ -7203,7 +7247,7 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_react_intl36 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
@@ -7225,7 +7269,7 @@ var messages_default = (0, import_react_intl35.defineMessages)({
 var useOnCopy = () => {
   const { formatMessage } = (0, import_react_intl36.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react29.useCallback)(
+  return (0, import_react28.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -7238,11 +7282,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 var import_react_intl37 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl37.useIntl)();
-  return (0, import_react30.useCallback)(
+  return (0, import_react29.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -7283,10 +7327,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react31.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react30.useMemo)(() => getMergedRenderers(props), [renderers]);
   const createSnackBar = useCreateSnackBar();
-  const logEvent = (0, import_react31.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react31.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const logEvent = (0, import_react30.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react30.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -7334,14 +7378,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react32 = require("react");
+var import_react31 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react32.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react31.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react32.useImperativeHandle)(
+  (0, import_react31.useImperativeHandle)(
     ref,
     () => ({
       getValue: () => {