@transferwise/components 0.0.0-experimental-ac06ea4 → 0.0.0-experimental-3cd48a3

package/build/types/dateInput/DateInput.d.ts

@@ -9,8 +9,8 @@ export interface DateInputProps {
     size?: SizeSmall | SizeMedium | SizeLarge;
     value?: Date | string;
     onChange: (value: string | null) => void;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
     dayLabel?: string;
     dayAutoComplete?: string;
     monthLabel?: string;

package/build/types/dateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCA6ShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCA6ShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts

@@ -9,7 +9,7 @@ export interface PhoneNumberInputProps {
     initialValue?: string;
     onChange: (value: string | null, prefix: string) => void;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: () => void;
     countryCode?: string;
     searchPlaceholder?: string;
     size?: SizeSmall | SizeMedium | SizeLarge;

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,+LAenB,qBAAqB,gCAwIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,+LAenB,qBAAqB,gCAoJvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ac06ea4",
+  "version": "0.0.0-experimental-3cd48a3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,12 +38,12 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/plugin-transform-runtime": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
-    "@formatjs/cli": "^6.2.12",
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@formatjs/cli": "^6.2.10",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -53,7 +53,7 @@
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
-    "@storybook/addon-knobs": "^7.1.1",
+    "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-viewport": "^7.6.19",
     "@storybook/addons": "^7.6.17",
     "@storybook/api": "^7.6.17",
@@ -76,7 +76,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "4.17.4",
+    "@types/lodash": "4.17.1",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^17.0.80",
@@ -86,15 +86,15 @@
     "@types/use-sync-external-store": "^0.0.6",
     "@wise/art": "^2.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-plugin-formatjs": "^10.5.16",
+    "babel-plugin-formatjs": "^10.5.14",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
-    "react-intl": "^6.6.8",
-    "rollup": "^4.18.0",
+    "react-intl": "^6.6.6",
+    "rollup": "^4.17.2",
     "storybook": "^7.6.19",
     "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.10.0",
@@ -110,14 +110,14 @@
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.5",
     "@floating-ui/react": "^0.25.4",
-    "@formatjs/intl-locale": "^3.4.6",
+    "@formatjs/intl-locale": "^3.4.5",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-id": "^1.0.1",
-    "@react-aria/focus": "^3.17.1",
-    "@react-aria/overlays": "^3.22.1",
+    "@react-aria/focus": "^3.17.0",
+    "@react-aria/overlays": "^3.22.0",
     "@react-spring/web": "~9.7.3",
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/neptune-validation": "^3.3.0",

package/src/dateInput/DateInput.tsx

@@ -17,8 +17,8 @@ export interface DateInputProps {
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
   dayLabel?: string;
   dayAutoComplete?: string;
   monthLabel?: string;
@@ -308,10 +308,10 @@ const DateInput = ({
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
       role="group" // Add role attribute to indicate container for interactive elements
-      onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
+      onFocus={(event) =>
         shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()
       }
-      onBlur={(event: React.FocusEvent<HTMLInputElement>) =>
+      onBlur={(event) =>
         shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()
       }
     >

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,29 +1,23 @@
-import { select, boolean, object } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import PhoneNumberInput from './PhoneNumberInput';
 
-export default {
+const meta = {
   component: PhoneNumberInput,
   title: 'Forms/PhoneNumberInput',
-};
+  tags: ['autodocs'],
+} satisfies Meta<typeof PhoneNumberInput>;
 
-export const Basic = () => {
-  const disabled = boolean('disabled', false);
-  const required = boolean('required', false);
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const selectProps = object('selectProps', {
-    className: 'custom-class',
-  });
+export default meta;
 
-  return (
-    <PhoneNumberInput
-      disabled={disabled}
-      required={required}
-      size={size}
-      selectProps={selectProps}
-      searchPlaceholder="searchPlaceholder"
-      placeholder="placeholder"
-      onChange={console.log}
-    />
-  );
-};
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    searchPlaceholder: 'searchPlaceholder',
+    placeholder: 'placeholder',
+    selectProps: {
+      className: 'custom-class',
+    },
+  },
+} satisfies Story;

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -28,7 +28,7 @@ export interface PhoneNumberInputProps {
   initialValue?: string;
   onChange: (value: string | null, prefix: string) => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: () => void;
   countryCode?: string;
   searchPlaceholder?: string;
   size?: SizeSmall | SizeMedium | SizeLarge;
@@ -73,6 +73,13 @@ const PhoneNumberInput = ({
   });
   const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
 
+  const [suffixDirty, setSuffixDirty] = useState(false);
+  useEffect(() => {
+    if (internalValue.suffix) {
+      setSuffixDirty(true);
+    }
+  }, [internalValue.suffix]);
+
   const countriesByPrefix = useMemo(
     () =>
       groupCountriesByPrefix(
@@ -168,6 +175,11 @@ const PhoneNumberInput = ({
             const country = prefix != null ? findCountryByPrefix(prefix) : null;
             setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
           }}
+          onClose={() => {
+            if (suffixDirty) {
+              onBlur?.();
+            }
+          }}
           {...selectProps}
         />
       </div>
@@ -186,7 +198,7 @@ const PhoneNumberInput = ({
             onChange={onSuffixChange}
             onPaste={onPaste}
             onFocus={onFocus}
-            onBlur={onBlur}
+            onBlur={() => onBlur?.()}
           />
         </div>
       </div>

package/src/utilities/logActionRequired.js

@@ -1,5 +1,5 @@
 export function logActionRequired(message) {
-  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }