@transferwise/components 0.0.0-experimental-4a346af → 0.0.0-experimental-5f3c456
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/typeahead/typeaheadOption/TypeaheadOption.js +6 -4
- package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
- package/build/typeahead/typeaheadOption/TypeaheadOption.mjs +7 -5
- package/build/typeahead/typeaheadOption/TypeaheadOption.mjs.map +1 -1
- package/build/typeahead/util/highlight.js +7 -2
- package/build/typeahead/util/highlight.js.map +1 -1
- package/build/typeahead/util/highlight.mjs +7 -2
- package/build/typeahead/util/highlight.mjs.map +1 -1
- package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts.map +1 -1
- package/build/types/typeahead/util/highlight.d.ts +5 -1
- package/build/types/typeahead/util/highlight.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/typeahead/Typeahead.rtl.spec.tsx +26 -0
- package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js +5 -4
- package/src/typeahead/typeaheadOption/TypeaheadOption.tsx +7 -3
- package/src/typeahead/util/highlight.spec.js +5 -5
- package/src/typeahead/util/highlight.tsx +10 -2
|
@@ -31,14 +31,16 @@ const Option = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
31
31
|
href: "#",
|
|
32
32
|
tabIndex: 0,
|
|
33
33
|
onClick: onClick,
|
|
34
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(
|
|
35
|
-
|
|
34
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(highlight, {
|
|
35
|
+
value: label,
|
|
36
|
+
query: query
|
|
36
37
|
}), note && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
37
38
|
className: "np-text-body-default m-l-1",
|
|
38
39
|
children: note
|
|
39
|
-
}), secondary && /*#__PURE__*/jsxRuntime.jsx(
|
|
40
|
+
}), secondary && /*#__PURE__*/jsxRuntime.jsx(highlight, {
|
|
40
41
|
className: "np-text-body-default text-ellipsis",
|
|
41
|
-
|
|
42
|
+
value: secondary,
|
|
43
|
+
query: query
|
|
42
44
|
})]
|
|
43
45
|
})
|
|
44
46
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypeaheadOption.js","sources":["../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport
|
|
1
|
+
{"version":3,"file":"TypeaheadOption.js","sources":["../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n option: TypeaheadOption<T>;\n selected?: boolean;\n onClick?: React.MouseEventHandler;\n query?: string;\n id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n const { option, selected = false, onClick = () => {}, query = '', id } = props;\n const { label, note, secondary } = option;\n\n return (\n <li\n ref={ref}\n role=\"option\"\n aria-selected={selected ? 'true' : 'false'}\n id={`option-${id}`}\n className={clsx('typeahead__option tw-dropdown-item clickable', {\n 'tw-dropdown-item--focused': selected,\n })}\n >\n <a className=\"dropdown-item\" href=\"#\" tabIndex={0} onClick={onClick}>\n <Highlight value={label} query={query} />\n {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"np-text-body-default text-ellipsis\"\n value={secondary}\n query={query}\n />\n )}\n </a>\n </li>\n );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;;;AAcMA,MAAAA,MAAM,gBAAGC,gBAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,QAAQ;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA,EAAAA;AAAE,GAAE,GAAGN,KAAK,CAAA;EAC9E,MAAM;IAAEO,KAAK;IAAEC,IAAI;AAAEC,IAAAA,SAAAA;AAAS,GAAE,GAAGP,MAAM,CAAA;AAEzC,EAAA,oBACEQ,cAAA,CAAA,IAAA,EAAA;AACET,IAAAA,GAAG,EAAEA,GAAI;AACTU,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeR,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CG,EAAE,EAAE,CAAUA,OAAAA,EAAAA,EAAE,CAAG,CAAA;AACnBM,IAAAA,SAAS,EAAEC,SAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEV,QAAAA;AAC9B,KAAA,CAAE;AAAAW,IAAAA,QAAA,eAEHC,eAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;AAACC,MAAAA,QAAQ,EAAE,CAAE;AAACb,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,cAClEJ,cAAA,CAACQ,SAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA,KAAAA;AAAM,OACtC,CAAA,EAACG,IAAI,iBAAIE,cAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN,IAAAA;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,cAAA,CAACQ,SAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,oCAAoC;AAC9CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA,KAAAA;AAAM,OACb,CACH,CAAA;KACA,CAAA;AACL,GAAI,CAAC,CAAA;AAET,CAAC;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import Highlight from '../util/highlight.mjs';
|
|
4
4
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
const Option = /*#__PURE__*/forwardRef((props, ref) => {
|
|
@@ -29,14 +29,16 @@ const Option = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
29
29
|
href: "#",
|
|
30
30
|
tabIndex: 0,
|
|
31
31
|
onClick: onClick,
|
|
32
|
-
children: [/*#__PURE__*/jsx(
|
|
33
|
-
|
|
32
|
+
children: [/*#__PURE__*/jsx(Highlight, {
|
|
33
|
+
value: label,
|
|
34
|
+
query: query
|
|
34
35
|
}), note && /*#__PURE__*/jsx("span", {
|
|
35
36
|
className: "np-text-body-default m-l-1",
|
|
36
37
|
children: note
|
|
37
|
-
}), secondary && /*#__PURE__*/jsx(
|
|
38
|
+
}), secondary && /*#__PURE__*/jsx(Highlight, {
|
|
38
39
|
className: "np-text-body-default text-ellipsis",
|
|
39
|
-
|
|
40
|
+
value: secondary,
|
|
41
|
+
query: query
|
|
40
42
|
})]
|
|
41
43
|
})
|
|
42
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypeaheadOption.mjs","sources":["../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport
|
|
1
|
+
{"version":3,"file":"TypeaheadOption.mjs","sources":["../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport Highlight from '../util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n option: TypeaheadOption<T>;\n selected?: boolean;\n onClick?: React.MouseEventHandler;\n query?: string;\n id?: string;\n};\n\nconst Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {\n const { option, selected = false, onClick = () => {}, query = '', id } = props;\n const { label, note, secondary } = option;\n\n return (\n <li\n ref={ref}\n role=\"option\"\n aria-selected={selected ? 'true' : 'false'}\n id={`option-${id}`}\n className={clsx('typeahead__option tw-dropdown-item clickable', {\n 'tw-dropdown-item--focused': selected,\n })}\n >\n <a className=\"dropdown-item\" href=\"#\" tabIndex={0} onClick={onClick}>\n <Highlight value={label} query={query} />\n {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n {secondary && (\n <Highlight\n className=\"np-text-body-default text-ellipsis\"\n value={secondary}\n query={query}\n />\n )}\n </a>\n </li>\n );\n});\n\nexport default Option;\n"],"names":["Option","forwardRef","props","ref","option","selected","onClick","query","id","label","note","secondary","_jsx","role","className","clsx","children","_jsxs","href","tabIndex","Highlight","value"],"mappings":";;;;;AAcMA,MAAAA,MAAM,gBAAGC,UAAU,CAA2C,CAACC,KAAK,EAAEC,GAAG,KAAI;EACjF,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,QAAQ;AAAEC,IAAAA,KAAK,GAAG,EAAE;AAAEC,IAAAA,EAAAA;AAAE,GAAE,GAAGN,KAAK,CAAA;EAC9E,MAAM;IAAEO,KAAK;IAAEC,IAAI;AAAEC,IAAAA,SAAAA;AAAS,GAAE,GAAGP,MAAM,CAAA;AAEzC,EAAA,oBACEQ,GAAA,CAAA,IAAA,EAAA;AACET,IAAAA,GAAG,EAAEA,GAAI;AACTU,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeR,QAAQ,GAAG,MAAM,GAAG,OAAQ;IAC3CG,EAAE,EAAE,CAAUA,OAAAA,EAAAA,EAAE,CAAG,CAAA;AACnBM,IAAAA,SAAS,EAAEC,IAAI,CAAC,8CAA8C,EAAE;AAC9D,MAAA,2BAA2B,EAAEV,QAAAA;AAC9B,KAAA,CAAE;AAAAW,IAAAA,QAAA,eAEHC,IAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;AAACC,MAAAA,QAAQ,EAAE,CAAE;AAACb,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,cAClEJ,GAAA,CAACQ,SAAS,EAAA;AAACC,QAAAA,KAAK,EAAEZ,KAAM;AAACF,QAAAA,KAAK,EAAEA,KAAAA;AAAM,OACtC,CAAA,EAACG,IAAI,iBAAIE,GAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN,IAAAA;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,GAAA,CAACQ,SAAS,EAAA;AACRN,QAAAA,SAAS,EAAC,oCAAoC;AAC9CO,QAAAA,KAAK,EAAEV,SAAU;AACjBJ,QAAAA,KAAK,EAAEA,KAAAA;AAAM,OACb,CACH,CAAA;KACA,CAAA;AACL,GAAI,CAAC,CAAA;AAET,CAAC;;;;"}
|
|
@@ -2,12 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
|
|
5
|
-
function
|
|
5
|
+
function Highlight({
|
|
6
|
+
className,
|
|
7
|
+
value,
|
|
8
|
+
query
|
|
9
|
+
}) {
|
|
6
10
|
if (value && query) {
|
|
7
11
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
8
12
|
const highlightEnd = highlightStart + query.trim().length;
|
|
9
13
|
if (highlightStart !== -1) {
|
|
10
14
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
15
|
+
className: className,
|
|
11
16
|
children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsxRuntime.jsx("strong", {
|
|
12
17
|
children: value.slice(highlightStart, highlightEnd)
|
|
13
18
|
}), value.slice(Math.max(0, highlightEnd))]
|
|
@@ -17,5 +22,5 @@ function highlight(value, query) {
|
|
|
17
22
|
return value;
|
|
18
23
|
}
|
|
19
24
|
|
|
20
|
-
module.exports =
|
|
25
|
+
module.exports = Highlight;
|
|
21
26
|
//# sourceMappingURL=highlight.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function
|
|
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;;;;"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
function
|
|
3
|
+
function Highlight({
|
|
4
|
+
className,
|
|
5
|
+
value,
|
|
6
|
+
query
|
|
7
|
+
}) {
|
|
4
8
|
if (value && query) {
|
|
5
9
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
6
10
|
const highlightEnd = highlightStart + query.trim().length;
|
|
7
11
|
if (highlightStart !== -1) {
|
|
8
12
|
return /*#__PURE__*/jsxs("span", {
|
|
13
|
+
className: className,
|
|
9
14
|
children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsx("strong", {
|
|
10
15
|
children: value.slice(highlightStart, highlightEnd)
|
|
11
16
|
}), value.slice(Math.max(0, highlightEnd))]
|
|
@@ -15,5 +20,5 @@ function highlight(value, query) {
|
|
|
15
20
|
return value;
|
|
16
21
|
}
|
|
17
22
|
|
|
18
|
-
export {
|
|
23
|
+
export { Highlight as default };
|
|
19
24
|
//# sourceMappingURL=highlight.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function
|
|
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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,MAAM,qHA2BV,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
export default function
|
|
1
|
+
export default function Highlight({ className, value, query, }: {
|
|
2
|
+
className?: string;
|
|
3
|
+
value: string;
|
|
4
|
+
query: string;
|
|
5
|
+
}): string | import("react").JSX.Element;
|
|
2
6
|
//# sourceMappingURL=highlight.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-5f3c456",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
"rollup": "^4.18.1",
|
|
93
93
|
"rollup-preserve-directives": "^1.1.1",
|
|
94
94
|
"storybook": "^8.2.2",
|
|
95
|
-
"@transferwise/
|
|
95
|
+
"@transferwise/less-config": "3.1.0",
|
|
96
96
|
"@wise/components-theming": "1.6.0",
|
|
97
|
-
"@transferwise/
|
|
97
|
+
"@transferwise/neptune-css": "14.18.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
|
@@ -25,4 +25,30 @@ describe('Typeahead', () => {
|
|
|
25
25
|
);
|
|
26
26
|
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);
|
|
27
27
|
});
|
|
28
|
+
|
|
29
|
+
describe('when no options are provided', () => {
|
|
30
|
+
it('does not render a dropdown when no options and no footer are provided', () => {
|
|
31
|
+
render(
|
|
32
|
+
<Field id="test" label="Tags">
|
|
33
|
+
<Typeahead id="test" name="test" options={[]} intl={intl} onChange={() => {}} />
|
|
34
|
+
</Field>,
|
|
35
|
+
);
|
|
36
|
+
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
|
|
37
|
+
});
|
|
38
|
+
it('does render a dropdown when only a footer is provided', () => {
|
|
39
|
+
render(
|
|
40
|
+
<Field id="test" label="Tags">
|
|
41
|
+
<Typeahead
|
|
42
|
+
id="test"
|
|
43
|
+
name="test"
|
|
44
|
+
options={[]}
|
|
45
|
+
intl={intl}
|
|
46
|
+
footer={<p>hello</p>}
|
|
47
|
+
onChange={() => {}}
|
|
48
|
+
/>
|
|
49
|
+
</Field>,
|
|
50
|
+
);
|
|
51
|
+
expect(screen.getByRole('menu')).toBeInTheDocument();
|
|
52
|
+
});
|
|
53
|
+
});
|
|
28
54
|
});
|
|
@@ -3,14 +3,15 @@ import { shallow } from 'enzyme';
|
|
|
3
3
|
import { fakeEvent } from '../../common/fakeEvents';
|
|
4
4
|
|
|
5
5
|
import TypeaheadOption from './TypeaheadOption';
|
|
6
|
+
import Highlight from '../util/highlight';
|
|
6
7
|
|
|
7
8
|
describe('Typeahead Option', () => {
|
|
8
9
|
let props;
|
|
9
10
|
let component;
|
|
10
11
|
|
|
11
|
-
const
|
|
12
|
+
const labelHighlight = () => component.find(Highlight);
|
|
12
13
|
const noteSpan = () => component.find('.np-text-body-default.m-l-1');
|
|
13
|
-
const
|
|
14
|
+
const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis');
|
|
14
15
|
const dropdownItem = () => component.find('.dropdown-item');
|
|
15
16
|
|
|
16
17
|
beforeEach(() => {
|
|
@@ -26,7 +27,7 @@ describe('Typeahead Option', () => {
|
|
|
26
27
|
it('renders a label', () => {
|
|
27
28
|
const label = 'test';
|
|
28
29
|
component.setProps({ option: { label } });
|
|
29
|
-
expect(
|
|
30
|
+
expect(labelHighlight().dive().text()).toStrictEqual(label);
|
|
30
31
|
});
|
|
31
32
|
|
|
32
33
|
it('renders a note', () => {
|
|
@@ -40,7 +41,7 @@ describe('Typeahead Option', () => {
|
|
|
40
41
|
const label = 'test';
|
|
41
42
|
const secondary = 'test note';
|
|
42
43
|
component.setProps({ option: { label, secondary } });
|
|
43
|
-
expect(
|
|
44
|
+
expect(secondaryTextHighlight().dive().text()).toStrictEqual(secondary);
|
|
44
45
|
});
|
|
45
46
|
|
|
46
47
|
it('highlights when selected', () => {
|
|
@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
|
|
4
4
|
import { TypeaheadOption } from '../Typeahead';
|
|
5
|
-
import
|
|
5
|
+
import Highlight from '../util/highlight';
|
|
6
6
|
|
|
7
7
|
export type TypeaheadOptionProps<T> = {
|
|
8
8
|
option: TypeaheadOption<T>;
|
|
@@ -27,10 +27,14 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
|
|
|
27
27
|
})}
|
|
28
28
|
>
|
|
29
29
|
<a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
|
|
30
|
-
<
|
|
30
|
+
<Highlight value={label} query={query} />
|
|
31
31
|
{note && <span className="np-text-body-default m-l-1">{note}</span>}
|
|
32
32
|
{secondary && (
|
|
33
|
-
<
|
|
33
|
+
<Highlight
|
|
34
|
+
className="np-text-body-default text-ellipsis"
|
|
35
|
+
value={secondary}
|
|
36
|
+
query={query}
|
|
37
|
+
/>
|
|
34
38
|
)}
|
|
35
39
|
</a>
|
|
36
40
|
</li>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { mount } from 'enzyme';
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import Highlight from './highlight';
|
|
4
4
|
|
|
5
5
|
describe('Typeahead input', () => {
|
|
6
6
|
const highlighted = (node) => node.find('strong');
|
|
@@ -9,7 +9,7 @@ describe('Typeahead input', () => {
|
|
|
9
9
|
it('highlights part of label that matches the query', () => {
|
|
10
10
|
const query = 'test';
|
|
11
11
|
const label = `this is a ${query} label`;
|
|
12
|
-
const result = mount(
|
|
12
|
+
const result = mount(<Highlight value={label} query={query} />);
|
|
13
13
|
|
|
14
14
|
expect(highlighted(result).text()).toStrictEqual(query);
|
|
15
15
|
|
|
@@ -19,15 +19,15 @@ describe('Typeahead input', () => {
|
|
|
19
19
|
it('does not change text if query is not present in it', () => {
|
|
20
20
|
const query = 'test';
|
|
21
21
|
const label = `this is a label`;
|
|
22
|
-
const result =
|
|
22
|
+
const result = mount(<Highlight value={label} query={query} />);
|
|
23
23
|
|
|
24
|
-
expect(result).toBe(label);
|
|
24
|
+
expect(result.text()).toBe(label);
|
|
25
25
|
});
|
|
26
26
|
|
|
27
27
|
it('highlights whole label that matches the query', () => {
|
|
28
28
|
const query = 'test';
|
|
29
29
|
const label = query;
|
|
30
|
-
const result = mount(
|
|
30
|
+
const result = mount(<Highlight value={label} query={query} />);
|
|
31
31
|
|
|
32
32
|
expect(highlighted(result).text()).toStrictEqual(query);
|
|
33
33
|
});
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
export default function
|
|
1
|
+
export default function Highlight({
|
|
2
|
+
className,
|
|
3
|
+
value,
|
|
4
|
+
query,
|
|
5
|
+
}: {
|
|
6
|
+
className?: string;
|
|
7
|
+
value: string;
|
|
8
|
+
query: string;
|
|
9
|
+
}) {
|
|
2
10
|
if (value && query) {
|
|
3
11
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
4
12
|
const highlightEnd = highlightStart + query.trim().length;
|
|
5
13
|
if (highlightStart !== -1) {
|
|
6
14
|
return (
|
|
7
|
-
<span>
|
|
15
|
+
<span className={className}>
|
|
8
16
|
{value.slice(0, Math.max(0, highlightStart))}
|
|
9
17
|
<strong>{value.slice(highlightStart, highlightEnd)}</strong>
|
|
10
18
|
{value.slice(Math.max(0, highlightEnd))}
|