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

package/build/main.css

@@ -387,6 +387,31 @@
 .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

@@ -336,7 +336,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -6633,7 +6633,8 @@ var import_components69 = require("@transferwise/components");
 
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components68 = require("@transferwise/components");
-var import_WithDisplayFormat = __toESM(require("@transferwise/components/build/WithDisplayFormat/WithDisplayFormat"));
+var import_icons7 = require("@transferwise/icons");
+var import_react27 = require("react");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
@@ -6651,8 +6652,8 @@ var commonKeys = [
 function VariableTextInput(inputProps) {
   const { id, value, control, displayFormat, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
-  if (control === "ssn-input" || displayFormat === "***-***-***" || displayFormat === "***-**-****") {
-    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
+  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":
@@ -6687,15 +6688,73 @@ function TextInput(props) {
   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, { onChange, type: _type } = _a, commonProps = __objRest(_a, ["onChange", "type"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-    "input",
-    __spreadProps(__spreadValues({}, commonProps), {
-      className: "form-control np-form-control np-form-control--size-auto np-input np-input--shape-rectangle",
-      type: "password",
-      onChange: (event) => onChange(event.target.value.replace(/[^0-9]/g, ""))
-    })
-  );
+  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 })
+      }
+    )
+  ] });
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -6907,7 +6966,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_components71 = require("@transferwise/components");
 var import_classnames35 = __toESM(require_classnames());
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -6915,7 +6974,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = (0, import_react27.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react28.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     import_components71.Nudge,
     {
@@ -7144,7 +7203,7 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_intl36 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
@@ -7166,7 +7225,7 @@ var messages_default = (0, import_react_intl35.defineMessages)({
 var useOnCopy = () => {
   const { formatMessage } = (0, import_react_intl36.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react28.useCallback)(
+  return (0, import_react29.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -7179,11 +7238,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_intl37 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl37.useIntl)();
-  return (0, import_react29.useCallback)(
+  return (0, import_react30.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -7224,10 +7283,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react30.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react31.useMemo)(() => getMergedRenderers(props), [renderers]);
   const createSnackBar = useCreateSnackBar();
-  const logEvent = (0, import_react30.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react30.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const logEvent = (0, import_react31.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react31.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -7275,14 +7334,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react31.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react32.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react31.useImperativeHandle)(
+  (0, import_react32.useImperativeHandle)(
     ref,
     () => ({
       getValue: () => {

package/build/main.mjs

@@ -6628,8 +6628,9 @@ import {
   TextArea,
   TextareaWithDisplayFormat
 } from "@transferwise/components";
-import WithDisplayFormatModule from "@transferwise/components/build/WithDisplayFormat/WithDisplayFormat";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { Eye, EyeShut } from "@transferwise/icons";
+import { useState as useState19 } from "react";
+import { jsx as jsx100, jsxs as jsxs40 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -6646,8 +6647,8 @@ var commonKeys = [
 function VariableTextInput(inputProps) {
   const { id, value, control, displayFormat, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
-  if (control === "ssn-input" || displayFormat === "***-***-***" || displayFormat === "***-**-****") {
-    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
+  if (control === "ssn-input" || (displayFormat == null ? void 0 : displayFormat.includes("*"))) {
+    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { maxLength: inputProps.maxLength, onChange }));
   }
   switch (control) {
     case "email":
@@ -6682,15 +6683,73 @@ function TextInput(props) {
   return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
 }
 function SsnInput(props) {
-  const _a = props, { onChange, type: _type } = _a, commonProps = __objRest(_a, ["onChange", "type"]);
-  return /* @__PURE__ */ jsx100(
-    "input",
-    __spreadProps(__spreadValues({}, commonProps), {
-      className: "form-control np-form-control np-form-control--size-auto np-input np-input--shape-rectangle",
-      type: "password",
-      onChange: (event) => onChange(event.target.value.replace(/[^0-9]/g, ""))
-    })
-  );
+  const _a = props, {
+    displayFormat = "",
+    maxLength,
+    onChange,
+    type: _type,
+    value = ""
+  } = _a, commonProps = __objRest(_a, [
+    "displayFormat",
+    "maxLength",
+    "onChange",
+    "type",
+    "value"
+  ]);
+  const [isVisible, setIsVisible] = useState19(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__ */ jsxs40("div", { className: "df-ssn-input-wrapper", children: [
+    /* @__PURE__ */ jsx100(
+      "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__ */ jsx100(
+      "button",
+      {
+        type: "button",
+        className: "df-ssn-input-toggle",
+        "aria-label": isVisible ? "Hide value" : "Show value",
+        onClick: () => setIsVisible((visible) => !visible),
+        children: isVisible ? /* @__PURE__ */ jsx100(EyeShut, { size: 24 }) : /* @__PURE__ */ jsx100(Eye, { size: 24 })
+      }
+    )
+  ] });
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -6902,7 +6961,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_classnames35 = __toESM(require_classnames());
 import { Nudge } from "@transferwise/components";
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -6910,7 +6969,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = useState19(true);
+  const [isVisible, setIsVisible] = useState20(true);
   return isVisible ? /* @__PURE__ */ jsx104(
     Nudge,
     {
@@ -7257,13 +7316,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsxs as jsxs41 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = useDynamicFlow(dfProps);
   const { onContextMenu, contextMenu } = useDFContextMenu(df.controller);
-  return /* @__PURE__ */ jsxs40("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs41("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });