@transferwise/components 46.71.4 → 46.71.6
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/common/polymorphicWithOverrides/PolymorphicWithOverrides.js +5 -4
- package/build/common/polymorphicWithOverrides/PolymorphicWithOverrides.js.map +1 -1
- package/build/common/polymorphicWithOverrides/PolymorphicWithOverrides.mjs +5 -4
- package/build/common/polymorphicWithOverrides/PolymorphicWithOverrides.mjs.map +1 -1
- package/build/typeahead/util/highlight.js +14 -2
- package/build/typeahead/util/highlight.js.map +1 -1
- package/build/typeahead/util/highlight.mjs +15 -3
- package/build/typeahead/util/highlight.mjs.map +1 -1
- package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts.map +1 -1
- package/build/types/typeahead/util/highlight.d.ts +1 -1
- package/build/types/typeahead/util/highlight.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx +10 -6
- package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js +7 -5
- package/src/typeahead/util/highlight.tsx +7 -2
|
@@ -4,12 +4,13 @@ var React = require('react');
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
|
|
6
6
|
const PolymorphicWithOverrides = /*#__PURE__*/React.forwardRef(function PolymorphicWithOverrides({
|
|
7
|
-
__overrides
|
|
8
|
-
as: Element,
|
|
9
|
-
...restOverrides
|
|
10
|
-
},
|
|
7
|
+
__overrides,
|
|
11
8
|
...restProps
|
|
12
9
|
}, ref) {
|
|
10
|
+
const {
|
|
11
|
+
as: Element,
|
|
12
|
+
...restOverrides
|
|
13
|
+
} = __overrides;
|
|
13
14
|
return /*#__PURE__*/jsxRuntime.jsx(Element, {
|
|
14
15
|
ref: ref,
|
|
15
16
|
...restProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PolymorphicWithOverrides.js","sources":["../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface PolymorphicWithOverridesProps {\n __overrides: {\n as: React.ElementType;\n [key: string]: unknown;\n };\n [key: string]: unknown;\n}\n\n/**\n * For overcoming the limitations of third-party components with an `as` prop.\n */\nexport const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(\n
|
|
1
|
+
{"version":3,"file":"PolymorphicWithOverrides.js","sources":["../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface PolymorphicWithOverridesProps {\n __overrides: {\n as: React.ElementType;\n [key: string]: unknown;\n };\n [key: string]: unknown;\n}\n\n/**\n * For overcoming the limitations of third-party components with an `as` prop.\n */\nexport const PolymorphicWithOverrides = forwardRef<Element | null, PolymorphicWithOverridesProps>(\n function PolymorphicWithOverrides(\n { __overrides, ...restProps },\n ref: React.ForwardedRef<Element | null>,\n ) {\n const { as: Element, ...restOverrides } =\n __overrides as PolymorphicWithOverridesProps['__overrides'];\n return <Element ref={ref} {...restProps} {...restOverrides} />;\n },\n);\n"],"names":["PolymorphicWithOverrides","forwardRef","__overrides","restProps","ref","as","Element","restOverrides","_jsx"],"mappings":";;;;;MAaaA,wBAAwB,gBAAGC,gBAAU,CAChD,SAASD,wBAAwBA,CAC/B;EAAEE,WAAW;EAAE,GAAGC,SAAAA;AAAS,CAAE,EAC7BC,GAAuC,EAAA;EAEvC,MAAM;AAAEC,IAAAA,EAAE,EAAEC,OAAO;IAAE,GAAGC,aAAAA;AAAa,GAAE,GACrCL,WAA2D,CAAA;EAC7D,oBAAOM,cAAA,CAACF,OAAO,EAAA;AAACF,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKD,SAAS;IAAA,GAAMI,aAAAA;AAAa,IAAI,CAAA;AAChE,CAAC;;;;"}
|
|
@@ -2,12 +2,13 @@ import { forwardRef } from 'react';
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWithOverrides({
|
|
5
|
-
__overrides
|
|
6
|
-
as: Element,
|
|
7
|
-
...restOverrides
|
|
8
|
-
},
|
|
5
|
+
__overrides,
|
|
9
6
|
...restProps
|
|
10
7
|
}, ref) {
|
|
8
|
+
const {
|
|
9
|
+
as: Element,
|
|
10
|
+
...restOverrides
|
|
11
|
+
} = __overrides;
|
|
11
12
|
return /*#__PURE__*/jsx(Element, {
|
|
12
13
|
ref: ref,
|
|
13
14
|
...restProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PolymorphicWithOverrides.mjs","sources":["../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface PolymorphicWithOverridesProps {\n __overrides: {\n as: React.ElementType;\n [key: string]: unknown;\n };\n [key: string]: unknown;\n}\n\n/**\n * For overcoming the limitations of third-party components with an `as` prop.\n */\nexport const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(\n
|
|
1
|
+
{"version":3,"file":"PolymorphicWithOverrides.mjs","sources":["../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface PolymorphicWithOverridesProps {\n __overrides: {\n as: React.ElementType;\n [key: string]: unknown;\n };\n [key: string]: unknown;\n}\n\n/**\n * For overcoming the limitations of third-party components with an `as` prop.\n */\nexport const PolymorphicWithOverrides = forwardRef<Element | null, PolymorphicWithOverridesProps>(\n function PolymorphicWithOverrides(\n { __overrides, ...restProps },\n ref: React.ForwardedRef<Element | null>,\n ) {\n const { as: Element, ...restOverrides } =\n __overrides as PolymorphicWithOverridesProps['__overrides'];\n return <Element ref={ref} {...restProps} {...restOverrides} />;\n },\n);\n"],"names":["PolymorphicWithOverrides","forwardRef","__overrides","restProps","ref","as","Element","restOverrides","_jsx"],"mappings":";;;MAaaA,wBAAwB,gBAAGC,UAAU,CAChD,SAASD,wBAAwBA,CAC/B;EAAEE,WAAW;EAAE,GAAGC,SAAAA;AAAS,CAAE,EAC7BC,GAAuC,EAAA;EAEvC,MAAM;AAAEC,IAAAA,EAAE,EAAEC,OAAO;IAAE,GAAGC,aAAAA;AAAa,GAAE,GACrCL,WAA2D,CAAA;EAC7D,oBAAOM,GAAA,CAACF,OAAO,EAAA;AAACF,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKD,SAAS;IAAA,GAAMI,aAAAA;AAAa,IAAI,CAAA;AAChE,CAAC;;;;"}
|
|
@@ -6,13 +6,25 @@ function Highlight({
|
|
|
6
6
|
className,
|
|
7
7
|
value,
|
|
8
8
|
query
|
|
9
|
+
}) {
|
|
10
|
+
const content = /*#__PURE__*/jsxRuntime.jsx(HighlightContent, {
|
|
11
|
+
value: value,
|
|
12
|
+
query: query
|
|
13
|
+
});
|
|
14
|
+
return className ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
15
|
+
className: className,
|
|
16
|
+
children: content
|
|
17
|
+
}) : content;
|
|
18
|
+
}
|
|
19
|
+
function HighlightContent({
|
|
20
|
+
value,
|
|
21
|
+
query
|
|
9
22
|
}) {
|
|
10
23
|
if (value && query) {
|
|
11
24
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
12
25
|
const highlightEnd = highlightStart + query.trim().length;
|
|
13
26
|
if (highlightStart !== -1) {
|
|
14
|
-
return /*#__PURE__*/jsxRuntime.jsxs(
|
|
15
|
-
className: className,
|
|
27
|
+
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
16
28
|
children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsxRuntime.jsx("strong", {
|
|
17
29
|
children: value.slice(highlightStart, highlightEnd)
|
|
18
30
|
}), value.slice(Math.max(0, highlightEnd))]
|
|
@@ -1 +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
|
|
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 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;;;;"}
|
|
@@ -1,16 +1,28 @@
|
|
|
1
|
-
import { jsxs,
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
function Highlight({
|
|
4
4
|
className,
|
|
5
5
|
value,
|
|
6
6
|
query
|
|
7
|
+
}) {
|
|
8
|
+
const content = /*#__PURE__*/jsx(HighlightContent, {
|
|
9
|
+
value: value,
|
|
10
|
+
query: query
|
|
11
|
+
});
|
|
12
|
+
return className ? /*#__PURE__*/jsx("span", {
|
|
13
|
+
className: className,
|
|
14
|
+
children: content
|
|
15
|
+
}) : content;
|
|
16
|
+
}
|
|
17
|
+
function HighlightContent({
|
|
18
|
+
value,
|
|
19
|
+
query
|
|
7
20
|
}) {
|
|
8
21
|
if (value && query) {
|
|
9
22
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
10
23
|
const highlightEnd = highlightStart + query.trim().length;
|
|
11
24
|
if (highlightStart !== -1) {
|
|
12
|
-
return /*#__PURE__*/jsxs(
|
|
13
|
-
className: className,
|
|
25
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
14
26
|
children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsx("strong", {
|
|
15
27
|
children: value.slice(highlightStart, highlightEnd)
|
|
16
28
|
}), value.slice(Math.max(0, highlightEnd))]
|
|
@@ -1 +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
|
|
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 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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PolymorphicWithOverrides.d.ts","sourceRoot":"","sources":["../../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE;QACX,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,
|
|
1
|
+
{"version":3,"file":"PolymorphicWithOverrides.d.ts","sourceRoot":"","sources":["../../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE;QACX,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,uIASpC,CAAC"}
|
|
@@ -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,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
|
|
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,+BAGA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.71.
|
|
3
|
+
"version": "46.71.6",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
"@types/lodash": "4.17.6",
|
|
77
77
|
"@types/lodash.clamp": "^4.0.9",
|
|
78
78
|
"@types/lodash.debounce": "^4.0.9",
|
|
79
|
-
"@types/react": "^18.3.
|
|
80
|
-
"@types/react-dom": "^18.3.
|
|
79
|
+
"@types/react": "^18.3.11",
|
|
80
|
+
"@types/react-dom": "^18.3.1",
|
|
81
81
|
"@types/react-transition-group": "4.4.10",
|
|
82
82
|
"@wise/art": "^2.7.0",
|
|
83
83
|
"babel-plugin-formatjs": "^10.5.16",
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
-
"@
|
|
96
|
-
"@
|
|
95
|
+
"@wise/components-theming": "1.6.1",
|
|
96
|
+
"@transferwise/neptune-css": "14.19.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
@@ -11,9 +11,13 @@ export interface PolymorphicWithOverridesProps {
|
|
|
11
11
|
/**
|
|
12
12
|
* For overcoming the limitations of third-party components with an `as` prop.
|
|
13
13
|
*/
|
|
14
|
-
export const PolymorphicWithOverrides = forwardRef
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
14
|
+
export const PolymorphicWithOverrides = forwardRef<Element | null, PolymorphicWithOverridesProps>(
|
|
15
|
+
function PolymorphicWithOverrides(
|
|
16
|
+
{ __overrides, ...restProps },
|
|
17
|
+
ref: React.ForwardedRef<Element | null>,
|
|
18
|
+
) {
|
|
19
|
+
const { as: Element, ...restOverrides } =
|
|
20
|
+
__overrides as PolymorphicWithOverridesProps['__overrides'];
|
|
21
|
+
return <Element ref={ref} {...restProps} {...restOverrides} />;
|
|
22
|
+
},
|
|
23
|
+
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { shallow } from 'enzyme';
|
|
1
|
+
import { shallow, mount } from 'enzyme';
|
|
2
2
|
|
|
3
3
|
import { fakeEvent } from '../../common/fakeEvents';
|
|
4
4
|
|
|
@@ -11,7 +11,7 @@ describe('Typeahead Option', () => {
|
|
|
11
11
|
|
|
12
12
|
const labelHighlight = () => component.find(Highlight);
|
|
13
13
|
const noteSpan = () => component.find('.np-text-body-default.m-l-1');
|
|
14
|
-
const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis');
|
|
14
|
+
const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis > span');
|
|
15
15
|
const dropdownItem = () => component.find('.dropdown-item');
|
|
16
16
|
|
|
17
17
|
beforeEach(() => {
|
|
@@ -21,13 +21,13 @@ describe('Typeahead Option', () => {
|
|
|
21
21
|
},
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
component =
|
|
24
|
+
component = mount(<TypeaheadOption {...props} />);
|
|
25
25
|
});
|
|
26
26
|
|
|
27
27
|
it('renders a label', () => {
|
|
28
28
|
const label = 'test';
|
|
29
29
|
component.setProps({ option: { label } });
|
|
30
|
-
expect(labelHighlight().
|
|
30
|
+
expect(labelHighlight().text()).toStrictEqual(label);
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
it('renders a note', () => {
|
|
@@ -41,10 +41,11 @@ describe('Typeahead Option', () => {
|
|
|
41
41
|
const label = 'test';
|
|
42
42
|
const secondary = 'test note';
|
|
43
43
|
component.setProps({ option: { label, secondary } });
|
|
44
|
-
expect(secondaryTextHighlight().
|
|
44
|
+
expect(secondaryTextHighlight().text()).toStrictEqual(secondary);
|
|
45
45
|
});
|
|
46
46
|
|
|
47
47
|
it('highlights when selected', () => {
|
|
48
|
+
component = shallow(<TypeaheadOption {...props} />);
|
|
48
49
|
component.setProps({
|
|
49
50
|
selected: true,
|
|
50
51
|
});
|
|
@@ -53,6 +54,7 @@ describe('Typeahead Option', () => {
|
|
|
53
54
|
});
|
|
54
55
|
|
|
55
56
|
it('expect aria-selected to be true', () => {
|
|
57
|
+
component = shallow(<TypeaheadOption {...props} />);
|
|
56
58
|
component.setProps({
|
|
57
59
|
selected: true,
|
|
58
60
|
});
|
|
@@ -7,16 +7,21 @@ export default function Highlight({
|
|
|
7
7
|
value: string;
|
|
8
8
|
query: string;
|
|
9
9
|
}) {
|
|
10
|
+
const content = <HighlightContent value={value} query={query} />;
|
|
11
|
+
return className ? <span className={className}>{content}</span> : content;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function HighlightContent({ value, query }: { value: string; query: string }) {
|
|
10
15
|
if (value && query) {
|
|
11
16
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
12
17
|
const highlightEnd = highlightStart + query.trim().length;
|
|
13
18
|
if (highlightStart !== -1) {
|
|
14
19
|
return (
|
|
15
|
-
|
|
20
|
+
<>
|
|
16
21
|
{value.slice(0, Math.max(0, highlightStart))}
|
|
17
22
|
<strong>{value.slice(highlightStart, highlightEnd)}</strong>
|
|
18
23
|
{value.slice(Math.max(0, highlightEnd))}
|
|
19
|
-
|
|
24
|
+
</>
|
|
20
25
|
);
|
|
21
26
|
}
|
|
22
27
|
}
|