@transferwise/components 46.71.5 → 46.71.6

package/build/typeahead/util/highlight.js

@@ -6,13 +6,25 @@ function Highlight({
   className,
   value,
   query
+}) {
+  const content = /*#__PURE__*/jsxRuntime.jsx(HighlightContent, {
+    value: value,
+    query: query
+  });
+  return className ? /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: className,
+    children: content
+  }) : content;
+}
+function HighlightContent({
+  value,
+  query
 }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
-      return /*#__PURE__*/jsxRuntime.jsxs("span", {
-        className: className,
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsxRuntime.jsx("strong", {
           children: value.slice(highlightStart, highlightEnd)
         }), value.slice(Math.max(0, highlightEnd))]

package/build/typeahead/util/highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <span className={className}>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </span>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","children","slice","Math","max","_jsx"],"mappings":";;;;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;EACC,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;AACzB,MAAA,oBACEM,eAAA,CAAA,MAAA,EAAA;AAAMT,QAAAA,SAAS,EAAEA,SAAU;AAAAU,QAAAA,QAAA,GACxBT,KAAK,CAACU,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CW,cAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAAST,KAAK,CAACU,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACU,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACnC,CAAC,CAAA;AAEX,KAAA;AACF,GAAA;AACA,EAAA,OAAON,KAAK,CAAA;AACd;;;;"}
+{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  const content = <HighlightContent value={value} query={query} />;\n  return className ? <span className={className}>{content}</span> : content;\n}\n\nfunction HighlightContent({ value, query }: { value: string; query: string }) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","content","_jsx","HighlightContent","children","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","_Fragment","slice","Math","max"],"mappings":";;;;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;AACC,EAAA,MAAMC,OAAO,gBAAGC,cAAA,CAACC,gBAAgB,EAAA;AAACJ,IAAAA,KAAK,EAAEA,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,IAAG,CAAA;EAChE,OAAOF,SAAS,gBAAGI,cAAA,CAAA,MAAA,EAAA;AAAMJ,IAAAA,SAAS,EAAEA,SAAU;AAAAM,IAAAA,QAAA,EAAEH,OAAAA;GAAc,CAAC,GAAGA,OAAO,CAAA;AAC3E,CAAA;AAEA,SAASE,gBAAgBA,CAAC;EAAEJ,KAAK;AAAEC,EAAAA,KAAAA;AAAyC,CAAA,EAAA;EAC1E,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMK,cAAc,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACC,OAAO,CAACP,KAAK,CAACQ,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGL,KAAK,CAACQ,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;MACzB,oBACEM,eAAA,CAAAC,mBAAA,EAAA;AAAAR,QAAAA,QAAA,GACGL,KAAK,CAACc,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CH,cAAA,CAAA,QAAA,EAAA;AAAAE,UAAAA,QAAA,EAASL,KAAK,CAACc,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACV,KAAK,CAACc,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACzC,CAAG,CAAA;AAEP,KAAA;AACF,GAAA;AACA,EAAA,OAAOV,KAAK,CAAA;AACd;;;;"}

package/build/typeahead/util/highlight.mjs

@@ -1,16 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function Highlight({
   className,
   value,
   query
+}) {
+  const content = /*#__PURE__*/jsx(HighlightContent, {
+    value: value,
+    query: query
+  });
+  return className ? /*#__PURE__*/jsx("span", {
+    className: className,
+    children: content
+  }) : content;
+}
+function HighlightContent({
+  value,
+  query
 }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
-      return /*#__PURE__*/jsxs("span", {
-        className: className,
+      return /*#__PURE__*/jsxs(Fragment, {
         children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsx("strong", {
           children: value.slice(highlightStart, highlightEnd)
         }), value.slice(Math.max(0, highlightEnd))]

package/build/typeahead/util/highlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <span className={className}>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </span>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","children","slice","Math","max","_jsx"],"mappings":";;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;EACC,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;AACzB,MAAA,oBACEM,IAAA,CAAA,MAAA,EAAA;AAAMT,QAAAA,SAAS,EAAEA,SAAU;AAAAU,QAAAA,QAAA,GACxBT,KAAK,CAACU,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CW,GAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAAST,KAAK,CAACU,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACU,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACnC,CAAC,CAAA;AAEX,KAAA;AACF,GAAA;AACA,EAAA,OAAON,KAAK,CAAA;AACd;;;;"}
+{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function Highlight({\n  className,\n  value,\n  query,\n}: {\n  className?: string;\n  value: string;\n  query: string;\n}) {\n  const content = <HighlightContent value={value} query={query} />;\n  return className ? <span className={className}>{content}</span> : content;\n}\n\nfunction HighlightContent({ value, query }: { value: string; query: string }) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["Highlight","className","value","query","content","_jsx","HighlightContent","children","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","_Fragment","slice","Math","max"],"mappings":";;AAAc,SAAUA,SAASA,CAAC;EAChCC,SAAS;EACTC,KAAK;AACLC,EAAAA,KAAAA;AAKD,CAAA,EAAA;AACC,EAAA,MAAMC,OAAO,gBAAGC,GAAA,CAACC,gBAAgB,EAAA;AAACJ,IAAAA,KAAK,EAAEA,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,IAAG,CAAA;EAChE,OAAOF,SAAS,gBAAGI,GAAA,CAAA,MAAA,EAAA;AAAMJ,IAAAA,SAAS,EAAEA,SAAU;AAAAM,IAAAA,QAAA,EAAEH,OAAAA;GAAc,CAAC,GAAGA,OAAO,CAAA;AAC3E,CAAA;AAEA,SAASE,gBAAgBA,CAAC;EAAEJ,KAAK;AAAEC,EAAAA,KAAAA;AAAyC,CAAA,EAAA;EAC1E,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMK,cAAc,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACC,OAAO,CAACP,KAAK,CAACQ,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGL,KAAK,CAACQ,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;MACzB,oBACEM,IAAA,CAAAC,QAAA,EAAA;AAAAR,QAAAA,QAAA,GACGL,KAAK,CAACc,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CH,GAAA,CAAA,QAAA,EAAA;AAAAE,UAAAA,QAAA,EAASL,KAAK,CAACc,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACV,KAAK,CAACc,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACzC,CAAG,CAAA;AAEP,KAAA;AACF,GAAA;AACA,EAAA,OAAOV,KAAK,CAAA;AACd;;;;"}

package/build/types/typeahead/util/highlight.d.ts

@@ -2,5 +2,5 @@ export default function Highlight({ className, value, query, }: {
     className?: string;
     value: string;
     query: string;
-}): string | import("react").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=highlight.d.ts.map

package/build/types/typeahead/util/highlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,wCAeA"}
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,+BAGA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.71.5",
+  "version": "46.71.6",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.19.1",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/neptune-css": "14.19.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { fakeEvent } from '../../common/fakeEvents';
 
@@ -11,7 +11,7 @@ describe('Typeahead Option', () => {
 
   const labelHighlight = () => component.find(Highlight);
   const noteSpan = () => component.find('.np-text-body-default.m-l-1');
-  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis');
+  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis > span');
   const dropdownItem = () => component.find('.dropdown-item');
 
   beforeEach(() => {
@@ -21,13 +21,13 @@ describe('Typeahead Option', () => {
       },
     };
 
-    component = shallow(<TypeaheadOption {...props} />);
+    component = mount(<TypeaheadOption {...props} />);
   });
 
   it('renders a label', () => {
     const label = 'test';
     component.setProps({ option: { label } });
-    expect(labelHighlight().dive().text()).toStrictEqual(label);
+    expect(labelHighlight().text()).toStrictEqual(label);
   });
 
   it('renders a note', () => {
@@ -41,10 +41,11 @@ describe('Typeahead Option', () => {
     const label = 'test';
     const secondary = 'test note';
     component.setProps({ option: { label, secondary } });
-    expect(secondaryTextHighlight().dive().text()).toStrictEqual(secondary);
+    expect(secondaryTextHighlight().text()).toStrictEqual(secondary);
   });
 
   it('highlights when selected', () => {
+    component = shallow(<TypeaheadOption {...props} />);
     component.setProps({
       selected: true,
     });
@@ -53,6 +54,7 @@ describe('Typeahead Option', () => {
   });
 
   it('expect aria-selected to be true', () => {
+    component = shallow(<TypeaheadOption {...props} />);
     component.setProps({
       selected: true,
     });

package/src/typeahead/util/highlight.tsx

@@ -7,16 +7,21 @@ export default function Highlight({
   value: string;
   query: string;
 }) {
+  const content = <HighlightContent value={value} query={query} />;
+  return className ? <span className={className}>{content}</span> : content;
+}
+
+function HighlightContent({ value, query }: { value: string; query: string }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
       return (
-        <span className={className}>
+        <>
           {value.slice(0, Math.max(0, highlightStart))}
           <strong>{value.slice(highlightStart, highlightEnd)}</strong>
           {value.slice(Math.max(0, highlightEnd))}
-        </span>
+        </>
       );
     }
   }