@finsemble/finsemble-ui 7.3.8 → 7.3.9
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@finsemble/finsemble-ui",
|
|
3
|
-
"version": "7.3.
|
|
3
|
+
"version": "7.3.9",
|
|
4
4
|
"description": "Ready-made React components to give you a head-start building your SmartDesktop.",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"build-storybook": "build-storybook"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@finsemble/finsemble-api": "7.3.
|
|
32
|
+
"@finsemble/finsemble-api": "7.3.9",
|
|
33
33
|
"@q42/floating-focus-a11y": "^1.3.3",
|
|
34
34
|
"@reduxjs/toolkit": "^1.5.0",
|
|
35
35
|
"@svgr/webpack": "^5.5.0",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
/**
|
|
3
|
-
* This is the search input field for the search menu.
|
|
4
|
-
* It will trigger calls to the searchMenu via the hook passed in
|
|
3
|
+
* This is the search input field for the search menu. It will trigger calls to the searchMenu via the hook passed in
|
|
5
4
|
* through props.
|
|
6
5
|
*/
|
|
7
6
|
export declare const SearchInput: () => JSX.Element;
|
|
@@ -1,28 +1,26 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { createRef } from "react";
|
|
1
|
+
import React, { createRef, useEffect } from "react";
|
|
3
2
|
import { useSearch } from "../../hooks/useSearch";
|
|
4
3
|
/**
|
|
5
|
-
* This is the search input field for the search menu.
|
|
6
|
-
* It will trigger calls to the searchMenu via the hook passed in
|
|
4
|
+
* This is the search input field for the search menu. It will trigger calls to the searchMenu via the hook passed in
|
|
7
5
|
* through props.
|
|
8
6
|
*/
|
|
9
7
|
export const SearchInput = () => {
|
|
10
|
-
const { searchQuery } = useSearch();
|
|
11
8
|
// the ref is needed so we can provide focus after clearing the search.
|
|
12
9
|
const textInputRef = createRef();
|
|
13
|
-
const { updateQuery, resetSearch } = useSearch();
|
|
14
|
-
const onClearSearchClicked = () =>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
10
|
+
const { updateQuery, resetSearch, searchQuery } = useSearch();
|
|
11
|
+
const onClearSearchClicked = () => resetSearch();
|
|
12
|
+
const handleInputChange = (e) => updateQuery(e.target.value);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
// Focus the input when the search query is cleared regardless of how it is cleared
|
|
15
|
+
if (searchQuery === "") {
|
|
16
|
+
textInputRef.current.focus();
|
|
17
|
+
}
|
|
18
|
+
}, [searchQuery]);
|
|
21
19
|
return (React.createElement("div", { className: "menu-item no-hover" },
|
|
22
20
|
React.createElement("div", { className: "menu-item-row" },
|
|
23
21
|
React.createElement("span", { className: "search-icon-wrapper" },
|
|
24
22
|
React.createElement("i", { className: "ff-search" })),
|
|
25
|
-
React.createElement("input", { ref: textInputRef, type: "text", placeholder: "Search", className: "search-input", value: searchQuery || "", autoFocus: true, onChange: handleInputChange }),
|
|
23
|
+
React.createElement("input", { ref: textInputRef, type: "text", placeholder: "Search", className: "search-input", value: searchQuery || "", autoFocus: true, onChange: handleInputChange, tabIndex: 0 }),
|
|
26
24
|
searchQuery && (React.createElement("span", { className: "clear-search menu-item-row-push-right", onClick: onClearSearchClicked },
|
|
27
25
|
React.createElement("i", { className: "ff-close" }))))));
|
|
28
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/search/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/search/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC/B,uEAAuE;IACvE,MAAM,YAAY,GAAQ,SAAS,EAAE,CAAC;IACtC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAE9D,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC;IAEjD,MAAM,iBAAiB,GAAG,CAAC,CAAgC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACd,mFAAmF;QACnF,IAAI,WAAW,KAAK,EAAE,EAAE;YACvB,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC7B;IACF,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACN,6BAAK,SAAS,EAAC,oBAAoB;QAClC,6BAAK,SAAS,EAAC,eAAe;YAC7B,8BAAM,SAAS,EAAC,qBAAqB;gBACpC,2BAAG,SAAS,EAAC,WAAW,GAAG,CACrB;YACP,+BACC,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,QAAQ,EACpB,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,WAAW,IAAI,EAAE,EACxB,SAAS,QACT,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EAAE,CAAC,GACV;YACD,WAAW,IAAI,CACf,8BAAM,SAAS,EAAC,uCAAuC,EAAC,OAAO,EAAE,oBAAoB;gBACpF,2BAAG,SAAS,EAAC,UAAU,GAAG,CACpB,CACP,CACI,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { createRef, useEffect, ChangeEvent } from \"react\";\nimport { useSearch } from \"../../hooks/useSearch\";\n\n/**\n * This is the search input field for the search menu. It will trigger calls to the searchMenu via the hook passed in\n * through props.\n */\nexport const SearchInput = () => {\n\t// the ref is needed so we can provide focus after clearing the search.\n\tconst textInputRef: any = createRef();\n\tconst { updateQuery, resetSearch, searchQuery } = useSearch();\n\n\tconst onClearSearchClicked = () => resetSearch();\n\n\tconst handleInputChange = (e: ChangeEvent<HTMLInputElement>) => updateQuery(e.target.value);\n\n\tuseEffect(() => {\n\t\t// Focus the input when the search query is cleared regardless of how it is cleared\n\t\tif (searchQuery === \"\") {\n\t\t\ttextInputRef.current.focus();\n\t\t}\n\t}, [searchQuery]);\n\n\treturn (\n\t\t<div className=\"menu-item no-hover\">\n\t\t\t<div className=\"menu-item-row\">\n\t\t\t\t<span className=\"search-icon-wrapper\">\n\t\t\t\t\t<i className=\"ff-search\" />\n\t\t\t\t</span>\n\t\t\t\t<input\n\t\t\t\t\tref={textInputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\tclassName=\"search-input\"\n\t\t\t\t\tvalue={searchQuery || \"\"}\n\t\t\t\t\tautoFocus\n\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t/>\n\t\t\t\t{searchQuery && (\n\t\t\t\t\t<span className=\"clear-search menu-item-row-push-right\" onClick={onClearSearchClicked}>\n\t\t\t\t\t\t<i className=\"ff-close\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}
|