@transferwise/components 46.45.0 → 46.46.1

package/build/withNextPortal/withNextPortal.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function withNextPortalWrapper(Component) {
+  return function (props) {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+      setMounted(true);
+    }, [setMounted]);
+    return mounted ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(Component, {
+      ...props
+    }), document.body) : null;
+  };
+}
+
+module.exports = withNextPortalWrapper;
+//# sourceMappingURL=withNextPortal.js.map

package/build/withNextPortal/withNextPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withNextPortal.js","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n    return mounted ? createPortal(<Component {...props} />, document.body) : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;;;AAGwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,IAAA,OAAOD,OAAO,gBAAGI,qBAAY,eAACC,cAAA,CAACP,SAAS,EAAA;MAAA,GAAKC,KAAAA;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI,CAAA;GAC9E,CAAA;AACH;;;;"}

package/build/withNextPortal/withNextPortal.mjs

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx } from 'react/jsx-runtime';
+
+function withNextPortalWrapper(Component) {
+  return function (props) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+      setMounted(true);
+    }, [setMounted]);
+    return mounted ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Component, {
+      ...props
+    }), document.body) : null;
+  };
+}
+
+export { withNextPortalWrapper as default };
+//# sourceMappingURL=withNextPortal.mjs.map

package/build/withNextPortal/withNextPortal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"withNextPortal.mjs","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n    return mounted ? createPortal(<Component {...props} />, document.body) : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;AAGwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE7CC,IAAAA,SAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,IAAA,OAAOD,OAAO,gBAAGI,YAAY,eAACC,GAAA,CAACP,SAAS,EAAA;MAAA,GAAKC,KAAAA;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI,CAAA;GAC9E,CAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.45.0",
+  "version": "46.46.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,10 +91,11 @@
     "lodash.times": "^4.3.2",
     "react-intl": "^6.6.6",
     "rollup": "^4.17.2",
+    "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.1.10",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.12.0",
-    "@wise/components-theming": "1.3.0"
+    "@wise/components-theming": "1.4.0",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/common/hooks/useVirtualKeyboard.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 /**
- * This progressive enhancement uses an experimental API, it might change, 
+ * This progressive enhancement uses an experimental API, it might change,
  * and at the time of authoring is not supported on iOS or mobile Firefox.
  * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
  */

package/src/inputs/InputGroup.spec.tsx

@@ -4,6 +4,7 @@ import { Field } from '../field/Field';
 import { mockResizeObserver, render, screen } from '../test-utils';
 import { Input } from './Input';
 import { InputGroup } from './InputGroup';
+import Button from '../button';
 
 mockResizeObserver();
 
@@ -16,11 +17,15 @@ describe('InputGroup', () => {
             content: <Search size={24} />,
             initialContentWidth: 24,
           }}
+          addonEnd={{
+            content: <Button>Go</Button>,
+            interactive: true,
+          }}
         >
           <Input />
         </InputGroup>
       </Field>,
     );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+    expect(screen.getByLabelText('Search…')).toHaveRole('textbox');
   });
 });

package/src/inputs/InputGroup.tsx

@@ -67,38 +67,23 @@ export function InputGroup({
   className,
   children,
 }: InputGroupProps) {
-  const inputAttributes = useInputAttributes({ nonLabelable: true });
-
   const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
 
   return (
-    /* Prevent nested controls from being labeled redundantly */
-    <FieldLabelIdContextProvider value={undefined}>
-      <InputIdContextProvider value={undefined}>
-        <InputDescribedByProvider value={undefined}>
-          <InputInvalidProvider value={undefined}>
-            <InputPaddingStartContext.Provider
-              value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
-            >
-              <InputPaddingEndContext.Provider
-                value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
-              >
-                <fieldset
-                  {...inputAttributes}
-                  disabled={disabled}
-                  className={classNames(className, 'np-input-group')}
-                >
-                  {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
-                  {children}
-                  {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
-                </fieldset>
-              </InputPaddingEndContext.Provider>
-            </InputPaddingStartContext.Provider>
-          </InputInvalidProvider>
-        </InputDescribedByProvider>
-      </InputIdContextProvider>
-    </FieldLabelIdContextProvider>
+    <InputPaddingStartContext.Provider
+      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
+    >
+      <InputPaddingEndContext.Provider
+        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
+      >
+        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>
+          {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
+          {children}
+          {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
+        </fieldset>
+      </InputPaddingEndContext.Provider>
+    </InputPaddingStartContext.Provider>
   );
 }
 
@@ -143,22 +128,31 @@ function InputAddon({
   });
 
   return (
-    <span
-      ref={ref}
-      className={classNames(
-        'np-input-addon',
-        {
-          'np-input-addon--placement-start': placement === 'start',
-          'np-input-addon--placement-end': placement === 'end',
-        },
-        interactive && 'np-input-addon--interactive',
-        {
-          'np-input-addon--padding-sm': padding === 'sm',
-          'np-input-addon--padding-md': padding === 'md',
-        },
-      )}
-    >
-      {content}
-    </span>
+    /* Prevent nested controls from being labeled redundantly */
+    <FieldLabelIdContextProvider value={undefined}>
+      <InputIdContextProvider value={undefined}>
+        <InputDescribedByProvider value={undefined}>
+          <InputInvalidProvider value={undefined}>
+            <span
+              ref={ref}
+              className={classNames(
+                'np-input-addon',
+                {
+                  'np-input-addon--placement-start': placement === 'start',
+                  'np-input-addon--placement-end': placement === 'end',
+                },
+                interactive && 'np-input-addon--interactive',
+                {
+                  'np-input-addon--padding-sm': padding === 'sm',
+                  'np-input-addon--padding-md': padding === 'md',
+                },
+              )}
+            >
+              {content}
+            </span>
+          </InputInvalidProvider>
+        </InputDescribedByProvider>
+      </InputIdContextProvider>
+    </FieldLabelIdContextProvider>
   );
 }

package/src/inputs/SearchInput.spec.tsx

@@ -11,6 +11,6 @@ describe('SearchInput', () => {
         <SearchInput />
       </Field>,
     );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+    expect(screen.getByLabelText('Search…')).toHaveRole('searchbox');
   });
 });

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Currency/);
+    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
   });
 });