@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/search/Highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.js","sourceRoot":"","sources":["../../../src/components/search/Highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;AAErE;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;AAEnF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAClD,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,uBAAuB,EAAE,iBAAiB,CAAC,CAAC;IAEtF,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,KAAsB,CAAC;IAE3B,+EAA+E;IAC/E,IAAI;QACH,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,YAAY,IAAI,aAAa,GAAG,EAAE,IAAI,CAAC,CAAC;KAC/D;IAAC,OAAO,CAAC,EAAE;QACX,KAAK,GAAG,YAAY,CAAC;QACrB,OAAO,CAAC,KAAK,CACZ,6FAA6F,YAAY,4DAA4D,CACrK,CAAC;KACF;IAED,MAAM,QAAQ,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAC,KAAK,EAAE,mCAAmC,CAAC,CAAC;IAEpF,OAAO,CACN,8BACC,uBAAuB,EAAE;YACxB,MAAM,EAAE,QAAQ;SAChB,GACM,CACR,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\n\nexport type HighlightProps = {\n\tmatchAgainst: string;\n\ttext: string;\n};\n\n/**\n *Encode characters of string\n *\n * @param {string} str - String to be encoded\n * @returns {string} String with all characters encoded\n */\nconst encodeStringChars = (str: string) => `&#${str.charCodeAt(0)};`;\n\n/**\n *Sanitize string for HTML to prevent XSS attack\n *\n * @param {*} str\n * @return {*}\n */\nconst sanitizeHTML = (str: string) => str?.replace(/[^\\w. ]/gi, encodeStringChars);\n\n/**\n * Highlights matching areas of a query against a piece of text, and then renders them\n * on the screen with a highlighted class. The matching is case insensitive.\n * NOTE: This calls dangerouslySetInnerHTML and contains a potential exploit for XSS.  Use with caution\n * when rendering externally-supplied content.\n */\nexport const Highlight = (props: HighlightProps) => {\n\tconst { matchAgainst, text } = props;\n\n\tconst escapedMatch = matchAgainst.replace(/([.*+?^${}()|[\\]\\\\])/g, encodeStringChars);\n\n\tconst sanitizedHtml = sanitizeHTML(text);\n\tlet regex: RegExp | string;\n\n\t// Catch unexpected cases where some combination of characters break the RegExp\n\ttry {\n\t\tregex = new RegExp(`(${escapedMatch || sanitizedHtml})`, \"gi\");\n\t} catch (e) {\n\t\tregex = escapedMatch;\n\t\tconsole.error(\n\t\t\t`Failure in Highlight component in finsemble-ui. Expected a valid regex. Instead received \"${matchAgainst}\". Please check that your component is passing valid data.`\n\t\t);\n\t}\n\n\tconst itemHtml = sanitizedHtml?.replace(regex, `<span class=\"highlight\">$1</span>`);\n\n\treturn (\n\t\t<span\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: itemHtml,\n\t\t\t}}\n\t\t></span>\n\t);\n};\n"]}

package/react/components/search/Highlight.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/search/Highlight.spec.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { Start, RegularExpression, NoHighlight } from "./Highlight.stories";
+import { enzymeQuerySelectorWrapper } from "../utils";
+describe("<Highlight/>", () => {
+    it("should contain a highlight section if there's a match", () => {
+        const wrapper = mount(React.createElement(Start, Object.assign({}, Start.args)));
+        const element = enzymeQuerySelectorWrapper(wrapper, ".highlight");
+        expect(element).to.not.be.null;
+    });
+    it("should not contain a highlight section if there's no match", () => {
+        const wrapper = mount(React.createElement(NoHighlight, Object.assign({}, NoHighlight.args)));
+        const element = enzymeQuerySelectorWrapper(wrapper, ".highlight");
+        expect(element).to.be.null;
+    });
+    it("should not throw an error if an invalid regular expression is used as the match string", () => {
+        mount(React.createElement(RegularExpression, Object.assign({}, RegularExpression.args)));
+    });
+});
+//# sourceMappingURL=Highlight.spec.js.map

package/react/components/search/Highlight.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.spec.js","sourceRoot":"","sources":["../../../src/components/search/Highlight.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE5E,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAEtD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAChE,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,KAAK,oBAAM,KAAK,CAAC,IAAuB,EAAI,CAAC,CAAC;QACrE,MAAM,OAAO,GAAG,0BAA0B,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAClE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAChC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,4DAA4D,EAAE,GAAG,EAAE;QACrE,MAAM,OAAO,GAAG,KAAK,CAAC,oBAAC,WAAW,oBAAM,WAAW,CAAC,IAAuB,EAAI,CAAC,CAAC;QACjF,MAAM,OAAO,GAAG,0BAA0B,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAClE,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,wFAAwF,EAAE,GAAG,EAAE;QACjG,KAAK,CAAC,oBAAC,iBAAiB,oBAAM,iBAAiB,CAAC,IAAuB,EAAI,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport { Start, RegularExpression, NoHighlight } from \"./Highlight.stories\";\nimport { HighlightProps } from \"./Highlight\";\nimport { enzymeQuerySelectorWrapper } from \"../utils\";\n\ndescribe(\"<Highlight/>\", () => {\n\tit(\"should contain a highlight section if there's a match\", () => {\n\t\tconst wrapper = mount(<Start {...(Start.args as HighlightProps)} />);\n\t\tconst element = enzymeQuerySelectorWrapper(wrapper, \".highlight\");\n\t\texpect(element).to.not.be.null;\n\t});\n\tit(\"should not contain a highlight section if there's no match\", () => {\n\t\tconst wrapper = mount(<NoHighlight {...(NoHighlight.args as HighlightProps)} />);\n\t\tconst element = enzymeQuerySelectorWrapper(wrapper, \".highlight\");\n\t\texpect(element).to.be.null;\n\t});\n\tit(\"should not throw an error if an invalid regular expression is used as the match string\", () => {\n\t\tmount(<RegularExpression {...(RegularExpression.args as HighlightProps)} />);\n\t});\n});\n"]}

package/react/components/search/Highlight.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { HighlightProps } from "./Highlight";
+import "../../assets/css/search.css";
+import { Story } from "@storybook/react/types-6-0";
+declare const _default: {
+    title: string;
+    component: (props: HighlightProps) => JSX.Element;
+};
+export default _default;
+export declare const Start: Story<HighlightProps>;
+export declare const MiddleWord: Story<HighlightProps>;
+export declare const MiddleText: Story<HighlightProps>;
+export declare const LastWord: Story<HighlightProps>;
+export declare const RegularExpression: Story<HighlightProps>;
+export declare const NoHighlight: Story<HighlightProps>;

package/react/components/search/Highlight.stories.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Highlight } from "./Highlight";
+import "../../assets/css/search.css";
+export default {
+    title: "Search/Highlight",
+    component: Highlight,
+};
+const Template = (args) => React.createElement(Highlight, Object.assign({}, args));
+export const Start = Template.bind({});
+Start.args = {
+    matchAgainst: "Example",
+    text: "Example chart apps",
+};
+export const MiddleWord = Template.bind({});
+MiddleWord.args = {
+    matchAgainst: "Chart",
+    text: "Example chart apps",
+};
+export const MiddleText = Template.bind({});
+MiddleText.args = {
+    matchAgainst: "amp",
+    text: "Example chart apps",
+};
+export const LastWord = Template.bind({});
+LastWord.args = {
+    matchAgainst: "ps",
+    text: "Example chart apps",
+};
+export const RegularExpression = Template.bind({});
+RegularExpression.args = {
+    matchAgainst: "+",
+    text: "A+B",
+};
+export const NoHighlight = Template.bind({});
+NoHighlight.args = {
+    matchAgainst: "Not Present",
+    text: "Hello World",
+};
+//# sourceMappingURL=Highlight.stories.js.map

package/react/components/search/Highlight.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.stories.js","sourceRoot":"","sources":["../../../src/components/search/Highlight.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAC;AACxD,OAAO,6BAA6B,CAAC;AAGrC,eAAe;IACd,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,QAAQ,GAA0B,CAAC,IAAoB,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,IAAI,EAAI,CAAC;AAE1F,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,YAAY,EAAE,SAAS;IACvB,IAAI,EAAE,oBAAoB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,YAAY,EAAE,OAAO;IACrB,IAAI,EAAE,oBAAoB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,YAAY,EAAE,KAAK;IACnB,IAAI,EAAE,oBAAoB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACf,YAAY,EAAE,IAAI;IAClB,IAAI,EAAE,oBAAoB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnD,iBAAiB,CAAC,IAAI,GAAG;IACxB,YAAY,EAAE,GAAG;IACjB,IAAI,EAAE,KAAK;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,YAAY,EAAE,aAAa;IAC3B,IAAI,EAAE,aAAa;CACnB,CAAC","sourcesContent":["import React from \"react\";\nimport { Highlight, HighlightProps } from \"./Highlight\";\nimport \"../../assets/css/search.css\";\nimport { Story } from \"@storybook/react/types-6-0\";\n\nexport default {\n\ttitle: \"Search/Highlight\",\n\tcomponent: Highlight,\n};\n\nconst Template: Story<HighlightProps> = (args: HighlightProps) => <Highlight {...args} />;\n\nexport const Start = Template.bind({});\nStart.args = {\n\tmatchAgainst: \"Example\",\n\ttext: \"Example chart apps\",\n};\n\nexport const MiddleWord = Template.bind({});\nMiddleWord.args = {\n\tmatchAgainst: \"Chart\",\n\ttext: \"Example chart apps\",\n};\n\nexport const MiddleText = Template.bind({});\nMiddleText.args = {\n\tmatchAgainst: \"amp\",\n\ttext: \"Example chart apps\",\n};\n\nexport const LastWord = Template.bind({});\nLastWord.args = {\n\tmatchAgainst: \"ps\",\n\ttext: \"Example chart apps\",\n};\n\nexport const RegularExpression = Template.bind({});\nRegularExpression.args = {\n\tmatchAgainst: \"+\",\n\ttext: \"A+B\",\n};\n\nexport const NoHighlight = Template.bind({});\nNoHighlight.args = {\n\tmatchAgainst: \"Not Present\",\n\ttext: \"Hello World\",\n};\n"]}

package/react/components/search/Search.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { MenuProps } from "../menu/Menu";
+import "../../assets/css/search.css";
+declare const Search: React.FunctionComponent<MenuProps>;
+export { Search };

package/react/components/search/Search.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { Menu } from "../menu/Menu";
+import { SearchResults } from "./SearchResults";
+import { SearchInput } from "./SearchInput";
+import "../../assets/css/search.css";
+const Search = (_a) => {
+    var _b;
+    var { width = 330, className = "search-menu", id = "SearchMenu" } = _a, otherProps = __rest(_a, ["width", "className", "id"]);
+    const completeProps = Object.assign(Object.assign({}, otherProps), { width,
+        className,
+        id, title: (_b = otherProps.title) !== null && _b !== void 0 ? _b : React.createElement("i", { className: "ff-search", "aria-label": "Search" }) });
+    return (React.createElement(Menu, Object.assign({}, completeProps),
+        React.createElement(SearchInput, null),
+        React.createElement(SearchResults, null)));
+};
+export { Search };
+//# sourceMappingURL=Search.js.map

package/react/components/search/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/components/search/Search.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,GAAuC,CAAC,EAKnD,EAAE,EAAE;;QAL+C,EACnD,KAAK,GAAG,GAAG,EACX,SAAS,GAAG,aAAa,EACzB,EAAE,GAAG,YAAY,OAEjB,EADG,UAAU,cAJsC,4BAKnD,CADa;IAEb,MAAM,aAAa,mCACf,UAAU,KACb,KAAK;QACL,SAAS;QACT,EAAE,EACF,KAAK,EAAE,MAAA,UAAU,CAAC,KAAK,mCAAI,2BAAG,SAAS,EAAC,WAAW,gBAAY,QAAQ,GAAK,GAC5E,CAAC;IAEF,OAAO,CACN,oBAAC,IAAI,oBAAK,aAAa;QACtB,oBAAC,WAAW,OAAG;QACf,oBAAC,aAAa,OAAG,CACX,CACP,CAAC;AACH,CAAC,CAAC;AACF,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import * as React from \"react\";\nimport { Menu } from \"../menu/Menu\";\nimport { MenuProps } from \"../menu/Menu\";\nimport { SearchResults } from \"./SearchResults\";\nimport { SearchInput } from \"./SearchInput\";\nimport \"../../assets/css/search.css\";\n\nconst Search: React.FunctionComponent<MenuProps> = ({\n\twidth = 330,\n\tclassName = \"search-menu\",\n\tid = \"SearchMenu\",\n\t...otherProps\n}) => {\n\tconst completeProps = {\n\t\t...otherProps,\n\t\twidth,\n\t\tclassName,\n\t\tid,\n\t\ttitle: otherProps.title ?? <i className=\"ff-search\" aria-label=\"Search\"></i>,\n\t};\n\n\treturn (\n\t\t<Menu {...completeProps}>\n\t\t\t<SearchInput />\n\t\t\t<SearchResults />\n\t\t</Menu>\n\t);\n};\nexport { Search };\n"]}

package/react/components/search/SearchBestMatch.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * Simple component that renders a menu item for the entity that
+ * best matches the user's query.
+ */
+export declare const SearchBestMatch: () => JSX.Element | null;

package/react/components/search/SearchBestMatch.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { SearchResult } from "./SearchResult";
+import { useSearch } from "../../hooks/useSearch";
+/**
+ * Iterates through the responses from every search provider
+ * and returns the item with the highest score.
+ * Half of the time this makes sense. The other half
+ * it doesn't make sense. It's all built on Fuse JS and how
+ * it grades the 'score' of a query to an entity.
+ */
+const findBestMatch = (searchProviderResponses) => {
+    if (searchProviderResponses) {
+        let bestMatch = null;
+        searchProviderResponses.forEach((providerInfo) => {
+            var _a;
+            (_a = providerInfo === null || providerInfo === void 0 ? void 0 : providerInfo.data) === null || _a === void 0 ? void 0 : _a.forEach((result) => {
+                if (bestMatch === null || result.score < bestMatch.score) {
+                    bestMatch = result;
+                }
+            });
+        });
+        return bestMatch;
+    }
+    return null;
+};
+/**
+ * Simple component that renders a menu item for the entity that
+ * best matches the user's query.
+ */
+export const SearchBestMatch = () => {
+    const { searchResults, searchQuery, resetSearch } = useSearch();
+    const bestMatchData = findBestMatch(searchResults);
+    if (!bestMatchData)
+        return null;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "search-title" }, "Best Match"),
+        React.createElement(SearchResult, { resetSearch: resetSearch, data: bestMatchData, searchQuery: searchQuery })));
+};
+//# sourceMappingURL=SearchBestMatch.js.map

package/react/components/search/SearchBestMatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBestMatch.js","sourceRoot":"","sources":["../../../src/components/search/SearchBestMatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD;;;;;;GAMG;AACH,MAAM,aAAa,GAAG,CAAC,uBAAwD,EAAE,EAAE;IAClF,IAAI,uBAAuB,EAAE;QAC5B,IAAI,SAAS,GAA4B,IAAI,CAAC;QAC9C,uBAAuB,CAAC,OAAO,CAAC,CAAC,YAAoC,EAAE,EAAE;;YACxE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,OAAO,CAAC,CAAC,MAAwB,EAAE,EAAE;gBACxD,IAAI,SAAS,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE;oBACzD,SAAS,GAAG,MAAM,CAAC;iBACnB;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,SAAS,CAAC;KACjB;IACD,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAChE,MAAM,aAAa,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IACnD,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACN;QACC,6BAAK,SAAS,EAAC,cAAc,iBAAiB;QAC9C,oBAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,GAAI,CACpF,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { SearchResult } from \"./SearchResult\";\nimport { useSearch } from \"../../hooks/useSearch\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype SearchProviderResponse = services.search.types.SearchProviderResponse;\ntype SearchResultType = services.search.types.SearchResultType;\n\n/**\n * Iterates through the responses from every search provider\n * and returns the item with the highest score.\n * Half of the time this makes sense. The other half\n * it doesn't make sense. It's all built on Fuse JS and how\n * it grades the 'score' of a query to an entity.\n */\nconst findBestMatch = (searchProviderResponses: SearchProviderResponse[] | null) => {\n\tif (searchProviderResponses) {\n\t\tlet bestMatch: SearchResultType | null = null;\n\t\tsearchProviderResponses.forEach((providerInfo: SearchProviderResponse) => {\n\t\t\tproviderInfo?.data?.forEach((result: SearchResultType) => {\n\t\t\t\tif (bestMatch === null || result.score < bestMatch.score) {\n\t\t\t\t\tbestMatch = result;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn bestMatch;\n\t}\n\treturn null;\n};\n\n/**\n * Simple component that renders a menu item for the entity that\n * best matches the user's query.\n */\nexport const SearchBestMatch = () => {\n\tconst { searchResults, searchQuery, resetSearch } = useSearch();\n\tconst bestMatchData = findBestMatch(searchResults);\n\tif (!bestMatchData) return null;\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"search-title\">Best Match</div>\n\t\t\t<SearchResult resetSearch={resetSearch} data={bestMatchData} searchQuery={searchQuery} />\n\t\t</div>\n\t);\n};\n"]}

package/react/components/search/SearchInput.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * This is the search input field for the search menu.
+ * It will trigger calls to the searchMenu via the hook passed in
+ * through props.
+ */
+export declare const SearchInput: () => JSX.Element;

package/react/components/search/SearchInput.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { createRef } from "react";
+import { useSearch } from "../../hooks/useSearch";
+/**
+ * This is the search input field for the search menu.
+ * It will trigger calls to the searchMenu via the hook passed in
+ * through props.
+ */
+export const SearchInput = () => {
+    const { searchQuery } = useSearch();
+    // the ref is needed so we can provide focus after clearing the search.
+    const textInputRef = createRef();
+    const { updateQuery, resetSearch } = useSearch();
+    const onClearSearchClicked = () => {
+        resetSearch();
+        textInputRef.current.focus();
+    };
+    const handleInputChange = (e) => {
+        updateQuery(e.target.value);
+    };
+    return (React.createElement("div", { className: "menu-item no-hover" },
+        React.createElement("div", { className: "menu-item-row" },
+            React.createElement("span", { className: "search-icon-wrapper" },
+                React.createElement("i", { className: "ff-search" })),
+            React.createElement("input", { ref: textInputRef, type: "text", placeholder: "Search", className: "search-input", value: searchQuery || "", autoFocus: true, onChange: handleInputChange }),
+            searchQuery && (React.createElement("span", { className: "clear-search menu-item-row-push-right", onClick: onClearSearchClicked },
+                React.createElement("i", { className: "ff-close" }))))));
+};
+//# sourceMappingURL=SearchInput.js.map

package/react/components/search/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/search/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IACpC,uEAAuE;IACvE,MAAM,YAAY,GAAQ,SAAS,EAAE,CAAC;IACtC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAEjD,MAAM,oBAAoB,GAAG,GAAG,EAAE;QACjC,WAAW,EAAE,CAAC;QACd,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACpE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,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,GAC1B;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 * as React from \"react\";\nimport { createRef } from \"react\";\nimport { useSearch } from \"../../hooks/useSearch\";\n\n/**\n * This is the search input field for the search menu.\n * It will trigger calls to the searchMenu via the hook passed in\n * through props.\n */\nexport const SearchInput = () => {\n\tconst { searchQuery } = useSearch();\n\t// the ref is needed so we can provide focus after clearing the search.\n\tconst textInputRef: any = createRef();\n\tconst { updateQuery, resetSearch } = useSearch();\n\n\tconst onClearSearchClicked = () => {\n\t\tresetSearch();\n\t\ttextInputRef.current.focus();\n\t};\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tupdateQuery(e.target.value);\n\t};\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/>\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"]}

package/react/components/search/SearchProviderResults.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { services } from "@finsemble/finsemble-api";
+declare type SearchProviderResponse = services.search.types.SearchProviderResponse;
+export declare const SearchProviderResults: React.FunctionComponent<{
+    providerResponse: SearchProviderResponse;
+}>;
+export {};

package/react/components/search/SearchProviderResults.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { SearchResult } from "./SearchResult";
+import { useSearch } from "../../hooks/useSearch";
+export const SearchProviderResults = ({ providerResponse }) => {
+    var _a;
+    const { searchQuery, resetSearch } = useSearch();
+    const clickResetSearch = () => {
+        resetSearch();
+    };
+    // Removes empty results then sorts by *lowest* score (search results are retuned from Finsemble where lowest is best)
+    // This uses fuse.js which uses the "bitap" algorithm
+    const providerResults = (_a = providerResponse === null || providerResponse === void 0 ? void 0 : providerResponse.data) === null || _a === void 0 ? void 0 : _a.filter((r) => r).sort((a, b) => a.score - b.score);
+    const providerClick = () => {
+        FSBL.Clients.SearchClient.invokeProviderAction(providerResponse.provider);
+        resetSearch();
+        finsembleWindow.blur();
+    };
+    return (React.createElement(React.Fragment, null,
+        providerResponse && (React.createElement("div", { className: "search-title" },
+            providerResponse.provider.displayName,
+            providerResponse.provider.providerActionTitle && (React.createElement("div", { className: "provider-title", onClick: providerClick },
+                providerResponse.provider.providerActionTitle,
+                React.createElement("div", { className: "ff-arrow-right arrow_right_grey" }))))), providerResults === null || providerResults === void 0 ? void 0 :
+        providerResults.map((individualResult, i) => (React.createElement(SearchResult, { key: i, resetSearch: clickResetSearch, searchQuery: searchQuery, data: individualResult })))));
+};
+//# sourceMappingURL=SearchProviderResults.js.map

package/react/components/search/SearchProviderResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchProviderResults.js","sourceRoot":"","sources":["../../../src/components/search/SearchProviderResults.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,MAAM,CAAC,MAAM,qBAAqB,GAE7B,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;;IAC7B,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAEjD,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC7B,WAAW,EAAE,CAAC;IACf,CAAC,CAAC;IACF,sHAAsH;IACtH,qDAAqD;IACrD,MAAM,eAAe,GAAG,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,0CAC3C,MAAM,CAAC,CAAC,CAAmB,EAAE,EAAE,CAAC,CAAC,EAClC,IAAI,CAAC,CAAC,CAAmB,EAAE,CAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,aAAa,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC1E,WAAW,EAAE,CAAC;QACd,eAAe,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IACF,OAAO,CACN;QACE,gBAAgB,IAAI,CACpB,6BAAK,SAAS,EAAC,cAAc;YAC3B,gBAAgB,CAAC,QAAQ,CAAC,WAAW;YACrC,gBAAgB,CAAC,QAAQ,CAAC,mBAAmB,IAAI,CACjD,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,aAAa;gBACpD,gBAAgB,CAAC,QAAQ,CAAC,mBAAmB;gBAC9C,6BAAK,SAAS,EAAC,iCAAiC,GAAO,CAClD,CACN,CACI,CACN,EACA,eAAe,aAAf,eAAe;QAAf,eAAe,CAAE,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAS,EAAE,EAAE,CAAC,CACtD,oBAAC,YAAY,IAAC,GAAG,EAAE,CAAC,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,gBAAgB,GAAI,CACzG,CAAC,CACA,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { SearchResult } from \"./SearchResult\";\nimport { useSearch } from \"../../hooks/useSearch\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype SearchProviderResponse = services.search.types.SearchProviderResponse;\ntype SearchResultType = services.search.types.SearchResultType;\n\nexport const SearchProviderResults: React.FunctionComponent<{\n\tproviderResponse: SearchProviderResponse;\n}> = ({ providerResponse }) => {\n\tconst { searchQuery, resetSearch } = useSearch();\n\n\tconst clickResetSearch = () => {\n\t\tresetSearch();\n\t};\n\t// Removes empty results then sorts by *lowest* score (search results are retuned from Finsemble where lowest is best)\n\t// This uses fuse.js which uses the \"bitap\" algorithm\n\tconst providerResults = providerResponse?.data\n\t\t?.filter((r: SearchResultType) => r)\n\t\t.sort((a: SearchResultType, b: SearchResultType) => a.score - b.score);\n\n\tconst providerClick = () => {\n\t\tFSBL.Clients.SearchClient.invokeProviderAction(providerResponse.provider);\n\t\tresetSearch();\n\t\tfinsembleWindow.blur();\n\t};\n\treturn (\n\t\t<>\n\t\t\t{providerResponse && (\n\t\t\t\t<div className=\"search-title\">\n\t\t\t\t\t{providerResponse.provider.displayName}\n\t\t\t\t\t{providerResponse.provider.providerActionTitle && (\n\t\t\t\t\t\t<div className=\"provider-title\" onClick={providerClick}>\n\t\t\t\t\t\t\t{providerResponse.provider.providerActionTitle}\n\t\t\t\t\t\t\t<div className=\"ff-arrow-right arrow_right_grey\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{providerResults?.map((individualResult, i: number) => (\n\t\t\t\t<SearchResult key={i} resetSearch={clickResetSearch} searchQuery={searchQuery} data={individualResult} />\n\t\t\t))}\n\t\t</>\n\t);\n};\n"]}

package/react/components/search/SearchResult.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { services } from "@finsemble/finsemble-api";
+declare type SearchQuery = services.search.types.SearchQuery;
+export declare type SearchResultType = {
+    data: any;
+    searchQuery: SearchQuery;
+    resetSearch: () => void;
+};
+export declare const SearchResult: (props: {
+    data: any;
+    searchQuery: SearchQuery;
+    resetSearch: () => void;
+}) => JSX.Element;
+export {};

package/react/components/search/SearchResult.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { MenuItem } from "../menu/MenuItem";
+import { Icon } from "../icon/Icon";
+import { Highlight } from "./Highlight";
+export const SearchResult = (props) => {
+    var _a, _b, _c, _d;
+    const { data, searchQuery, resetSearch } = props;
+    const displayName = (_a = data.displayName) !== null && _a !== void 0 ? _a : data.name;
+    // Will trigger the action associated with the item
+    // (e.g., loading a workspace, spawning a component)
+    const onSearchResultClicked = () => {
+        var _a;
+        FSBL.Clients.SearchClient.invokeItemAction(data, (_a = data.actions) === null || _a === void 0 ? void 0 : _a[0]);
+        resetSearch();
+    };
+    const onActionClicked = (action) => {
+        FSBL.Clients.SearchClient.invokeItemAction(data, action);
+        resetSearch();
+    };
+    // Default icon to be based on initials
+    const defaultIcon = {
+        imageType: "initials",
+        name: displayName,
+        category: data.type,
+    };
+    // Use iconography if provided in the search results
+    const maybeProviderIcon = () => {
+        if (!data.icon)
+            return undefined;
+        // Default conversion which can be overridden if the provider explicitly
+        // provides `imageType`, `name` or `category` fields.
+        return Object.assign({ imageType: data.icon.type, name: displayName, category: data.type }, data.icon);
+    };
+    const icon = (_b = maybeProviderIcon()) !== null && _b !== void 0 ? _b : defaultIcon;
+    return (React.createElement(MenuItem, { onClick: onSearchResultClicked },
+        React.createElement("div", { className: "menu-item-row" },
+            React.createElement(Icon, Object.assign({}, icon)),
+            React.createElement(Highlight, { text: displayName, matchAgainst: searchQuery || "" }),
+            ((_c = data.actions) === null || _c === void 0 ? void 0 : _c.length) > 1 && (React.createElement("div", { className: "search-actions" }, (_d = data.actions) === null || _d === void 0 ? void 0 : _d.map((action, i) => (React.createElement("div", { key: `actionbtn${i}`, className: "search-actions actionButton", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onActionClicked(action);
+                    resetSearch();
+                    finsembleWindow.blur();
+                } }, action.name))))))));
+};
+//# sourceMappingURL=SearchResult.js.map

package/react/components/search/SearchResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/search/SearchResult.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAuE,EAAE,EAAE;;IACvG,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,IAAI,CAAC;IAElD,mDAAmD;IACnD,oDAAoD;IACpD,MAAM,qBAAqB,GAAG,GAAG,EAAE;;QAClC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAG,CAAC,CAAC,CAAC,CAAC;QACpE,WAAW,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,MAAW,EAAE,EAAE;QACvC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACzD,WAAW,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,uCAAuC;IACvC,MAAM,WAAW,GAAmB;QACnC,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,IAAI,CAAC,IAAI;KACnB,CAAC;IAEF,oDAAoD;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,SAAS,CAAC;QACjC,wEAAwE;QACxE,qDAAqD;QACrD,uBACC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACzB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,IAChB,IAAI,CAAC,IAAI,EACX;IACH,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,MAAA,iBAAiB,EAAE,mCAAI,WAAW,CAAC;IAEhD,OAAO,CACN,oBAAC,QAAQ,IAAC,OAAO,EAAE,qBAAqB;QACvC,6BAAK,SAAS,EAAC,eAAe;YAC7B,oBAAC,IAAI,oBAAK,IAAI,EAAI;YAClB,oBAAC,SAAS,IAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,IAAI,EAAE,GAAI;YAChE,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,IAAG,CAAC,IAAI,CAC5B,6BAAK,SAAS,EAAC,gBAAgB,IAC7B,MAAA,IAAI,CAAC,OAAO,0CAAE,GAAG,CAAC,CAAC,MAAW,EAAE,CAAS,EAAE,EAAE,CAAC,CAC9C,6BACC,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAE;oBAChC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,eAAe,CAAC,MAAM,CAAC,CAAC;oBACxB,WAAW,EAAE,CAAC;oBACd,eAAe,CAAC,IAAI,EAAE,CAAC;gBACxB,CAAC,IAEA,MAAM,CAAC,IAAI,CACP,CACN,CAAC,CACG,CACN,CACI,CACI,CACX,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { MenuItem } from \"../menu/MenuItem\";\nimport { Icon } from \"../icon/Icon\";\nimport { Highlight } from \"./Highlight\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { IconDescriptor } from \"@finsemble/finsemble-api/types/services/window/types\";\n\ntype SearchQuery = services.search.types.SearchQuery;\n\nexport type SearchResultType = {\n\tdata: any;\n\tsearchQuery: SearchQuery;\n\tresetSearch: () => void;\n};\n\nexport const SearchResult = (props: { data: any; searchQuery: SearchQuery; resetSearch: () => void }) => {\n\tconst { data, searchQuery, resetSearch } = props;\n\n\tconst displayName = data.displayName ?? data.name;\n\n\t// Will trigger the action associated with the item\n\t// (e.g., loading a workspace, spawning a component)\n\tconst onSearchResultClicked = () => {\n\t\tFSBL.Clients.SearchClient.invokeItemAction(data, data.actions?.[0]);\n\t\tresetSearch();\n\t};\n\n\tconst onActionClicked = (action: any) => {\n\t\tFSBL.Clients.SearchClient.invokeItemAction(data, action);\n\t\tresetSearch();\n\t};\n\n\t// Default icon to be based on initials\n\tconst defaultIcon: IconDescriptor = {\n\t\timageType: \"initials\",\n\t\tname: displayName,\n\t\tcategory: data.type,\n\t};\n\n\t// Use iconography if provided in the search results\n\tconst maybeProviderIcon = () => {\n\t\tif (!data.icon) return undefined;\n\t\t// Default conversion which can be overridden if the provider explicitly\n\t\t// provides `imageType`, `name` or `category` fields.\n\t\treturn {\n\t\t\timageType: data.icon.type,\n\t\t\tname: displayName,\n\t\t\tcategory: data.type,\n\t\t\t...data.icon,\n\t\t};\n\t};\n\n\tconst icon = maybeProviderIcon() ?? defaultIcon;\n\n\treturn (\n\t\t<MenuItem onClick={onSearchResultClicked}>\n\t\t\t<div className=\"menu-item-row\">\n\t\t\t\t<Icon {...icon} />\n\t\t\t\t<Highlight text={displayName} matchAgainst={searchQuery || \"\"} />\n\t\t\t\t{data.actions?.length > 1 && (\n\t\t\t\t\t<div className=\"search-actions\">\n\t\t\t\t\t\t{data.actions?.map((action: any, i: number) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={`actionbtn${i}`}\n\t\t\t\t\t\t\t\tclassName=\"search-actions actionButton\"\n\t\t\t\t\t\t\t\tonClick={(e: React.MouseEvent) => {\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\tonActionClicked(action);\n\t\t\t\t\t\t\t\t\tresetSearch();\n\t\t\t\t\t\t\t\t\tfinsembleWindow.blur();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{action.name}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</MenuItem>\n\t);\n};\n"]}

package/react/components/search/SearchResult.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/search/SearchResult.spec.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { ComponentResult, WorkspaceResult } from "./SearchResult.stories";
+import { accessibilityAssessor } from "../sdd/tests/a11y_helper";
+import sinon from "sinon";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+addons.setChannel(mockChannel());
+describe("<SearchResult/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it.skip("passess accessibility scans", async () => {
+        // Skipping because the icons don't have alt text, and that will need to be addressed
+        const wrapper = mount(React.createElement(ComponentResult, Object.assign({}, ComponentResult.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    });
+    it("should display an icon if an icon URL is provided", () => {
+        const wrapper = mount(React.createElement(ComponentResult, Object.assign({}, ComponentResult.args)));
+        expect(wrapper.find("img").exists()).to.be.true;
+    });
+    it("should display a default icon if no icon URL is provided", () => {
+        const wrapper = mount(React.createElement(WorkspaceResult, Object.assign({}, WorkspaceResult.args)));
+        expect(wrapper.find(".icon-avatar-wrapper span").exists()).to.be.true;
+    });
+    it("clicking a search result should call invokeItemAction and resetSearch", () => {
+        var _a, _b;
+        const stub = sinon.stub(console, "log");
+        const resetSpy = sinon.spy(ComponentResult.args, "resetSearch");
+        const wrapper = mount(React.createElement(ComponentResult, Object.assign({}, ComponentResult.args)));
+        wrapper.find("[role='menuitem']").simulate("click");
+        expect(resetSpy.calledOnce, "resetSearch was called").to.be.true;
+        expect(stub.calledOnce, "invokeAction was invoked").to.be.true;
+        const parameters = stub.args[0][1];
+        expect(parameters[0], "First parameter is the component data").to.deep.equal((_a = ComponentResult.args) === null || _a === void 0 ? void 0 : _a.data);
+        expect(parameters[1], "Second parameter is the action data").to.deep.equal((_b = ComponentResult.args) === null || _b === void 0 ? void 0 : _b.data.actions[0]);
+    });
+});
+/*
+Outstanding test cases:
+    display extra item actions (WithProviderActions)
+    click extra item action
+ */
+//# sourceMappingURL=SearchResult.spec.js.map

package/react/components/search/SearchResult.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.spec.js","sourceRoot":"","sources":["../../../src/components/search/SearchResult.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport { ComponentResult, WorkspaceResult } from \"./SearchResult.stories\";\nimport { SearchResultType } from \"./SearchResult\";\nimport { accessibilityAssessor } from \"../sdd/tests/a11y_helper\";\nimport sinon from \"sinon\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<SearchResult/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\tit.skip(\"passess accessibility scans\", async () => {\n\t\t// Skipping because the icons don't have alt text, and that will need to be addressed\n\t\tconst wrapper = mount(<ComponentResult {...(ComponentResult.args as SearchResultType)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\n\tit(\"should display an icon if an icon URL is provided\", () => {\n\t\tconst wrapper = mount(<ComponentResult {...(ComponentResult.args as SearchResultType)} />);\n\n\t\texpect(wrapper.find(\"img\").exists()).to.be.true;\n\t});\n\n\tit(\"should display a default icon if no icon URL is provided\", () => {\n\t\tconst wrapper = mount(<WorkspaceResult {...(WorkspaceResult.args as SearchResultType)} />);\n\n\t\texpect(wrapper.find(\".icon-avatar-wrapper span\").exists()).to.be.true;\n\t});\n\n\tit(\"clicking a search result should call invokeItemAction and resetSearch\", () => {\n\t\tconst stub = sinon.stub(console, \"log\");\n\t\tconst resetSpy = sinon.spy(ComponentResult.args as SearchResultType, \"resetSearch\");\n\t\tconst wrapper = mount(<ComponentResult {...(ComponentResult.args as SearchResultType)} />);\n\n\t\twrapper.find(\"[role='menuitem']\").simulate(\"click\");\n\n\t\texpect(resetSpy.calledOnce, \"resetSearch was called\").to.be.true;\n\t\texpect(stub.calledOnce, \"invokeAction was invoked\").to.be.true;\n\n\t\tconst parameters = stub.args[0][1];\n\t\texpect(parameters[0], \"First parameter is the component data\").to.deep.equal(ComponentResult.args?.data);\n\t\texpect(parameters[1], \"Second parameter is the action data\").to.deep.equal(ComponentResult.args?.data.actions[0]);\n\t});\n});\n\n/*\nOutstanding test cases:\n\tdisplay extra item actions (WithProviderActions)\n\tclick extra item action\n */\n"]}

package/react/components/search/SearchResult.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SearchResultType } from "./SearchResult";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/search.css";
+declare const _default: {
+    title: string;
+    component: (props: {
+        data: any;
+        searchQuery: import("@finsemble/finsemble-api/types/services/search/types").SearchQuery;
+        resetSearch: () => void;
+    }) => JSX.Element;
+};
+export default _default;
+export declare const ComponentResult: Story<SearchResultType>;
+export declare const WorkspaceResult: Story<SearchResultType>;
+export declare const WithProviderActions: Story<SearchResultType>;

package/react/components/search/SearchResult.stories.js

@@ -0,0 +1,113 @@
+import React from "react";
+import { SearchResult } from "./SearchResult";
+import "../../assets/css/search.css";
+import { action } from "@storybook/addon-actions";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { createStore } from "../../store";
+export default {
+    title: "Search/SearchResult",
+    component: SearchResult,
+};
+const Template = (args) => {
+    initFSBL(window);
+    FSBL.Clients.SearchClient.invokeItemAction = (...actionArgs) => {
+        console.log("invokeItemAction", actionArgs);
+    };
+    return (React.createElement(FinsembleProvider, { store: createStore() },
+        React.createElement("div", { role: "menu" },
+            React.createElement(SearchResult, Object.assign({}, args)))));
+};
+export const ComponentResult = Template.bind({});
+ComponentResult.args = {
+    data: {
+        actions: [{ name: "Spawn" }],
+        description: "",
+        displayName: "Take a Tour",
+        icon: {
+            imageType: "url",
+            path: "http://localhost:3375/build/components/tour/take-a-tour.svg",
+        },
+        matches: [
+            {
+                indices: [
+                    [0, 0],
+                    [7, 7],
+                ],
+                key: "component.displayName",
+                value: "Take a Tour",
+            },
+            {
+                indices: [[0, 0]],
+                key: "component.type",
+                value: "Tour",
+            },
+        ],
+        name: "Tour",
+        provider: "System Manager.Installed Components",
+        score: 0.000018578044550916993,
+        tags: [],
+        type: "Application",
+    },
+    searchQuery: "T",
+    resetSearch: action("resetSearch"),
+};
+export const WorkspaceResult = Template.bind({});
+WorkspaceResult.args = {
+    data: {
+        actions: [{ name: "Switch" }],
+        description: "",
+        matches: [
+            {
+                indices: [
+                    [2, 2],
+                    [7, 8],
+                ],
+                value: "auto_afterFeature",
+            },
+        ],
+        name: "auto_afterFeature",
+        provider: "workspaceService.Installed Workspaces",
+        score: 0.07,
+        tags: [],
+        type: "Workspace",
+    },
+    searchQuery: "Te",
+    resetSearch: action("resetSearch"),
+};
+export const WithProviderActions = Template.bind({});
+WithProviderActions.args = {
+    data: {
+        actions: [
+            {
+                name: "Launch",
+                colorName: "Red",
+                colorHex: "#FF0000",
+            },
+            {
+                name: "Set",
+                colorName: "Red",
+                colorHex: "#FF0000",
+            },
+        ],
+        description: "The color Red",
+        matches: [
+            {
+                indices: [[0, 3]],
+                value: "Red",
+            },
+        ],
+        name: "Red",
+        provider: "colorSearchProviderService.Colors",
+        score: 100,
+        tags: [],
+        type: "color",
+    },
+    searchQuery: "Red",
+    resetSearch: action("resetSearch"),
+};
+// with icon
+// without icon
+// with tags
+// with 0 actions
+//# sourceMappingURL=SearchResult.stories.js.map

package/react/components/search/SearchResult.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.stories.js","sourceRoot":"","sources":["../../../src/components/search/SearchResult.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { SearchResult, SearchResultType } from \"./SearchResult\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport \"../../assets/css/search.css\";\nimport { action } from \"@storybook/addon-actions\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { createStore } from \"../../store\";\n\nexport default {\n\ttitle: \"Search/SearchResult\",\n\tcomponent: SearchResult,\n};\n\nconst Template: Story<SearchResultType> = (args: SearchResultType) => {\n\tinitFSBL(window);\n\n\tFSBL.Clients.SearchClient.invokeItemAction = (...actionArgs) => {\n\t\tconsole.log(\"invokeItemAction\", actionArgs);\n\t};\n\n\treturn (\n\t\t<FinsembleProvider store={createStore()}>\n\t\t\t<div role=\"menu\">\n\t\t\t\t<SearchResult {...args} />\n\t\t\t</div>\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const ComponentResult = Template.bind({});\nComponentResult.args = {\n\tdata: {\n\t\tactions: [{ name: \"Spawn\" }],\n\t\tdescription: \"\",\n\t\tdisplayName: \"Take a Tour\",\n\t\ticon: {\n\t\t\timageType: \"url\",\n\t\t\tpath: \"http://localhost:3375/build/components/tour/take-a-tour.svg\",\n\t\t},\n\t\tmatches: [\n\t\t\t{\n\t\t\t\tindices: [\n\t\t\t\t\t[0, 0],\n\t\t\t\t\t[7, 7],\n\t\t\t\t],\n\t\t\t\tkey: \"component.displayName\",\n\t\t\t\tvalue: \"Take a Tour\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tindices: [[0, 0]],\n\t\t\t\tkey: \"component.type\",\n\t\t\t\tvalue: \"Tour\",\n\t\t\t},\n\t\t],\n\t\tname: \"Tour\",\n\t\tprovider: \"System Manager.Installed Components\",\n\t\tscore: 0.000018578044550916993,\n\t\ttags: [],\n\t\ttype: \"Application\",\n\t},\n\tsearchQuery: \"T\",\n\tresetSearch: action(\"resetSearch\"),\n};\n\nexport const WorkspaceResult = Template.bind({});\nWorkspaceResult.args = {\n\tdata: {\n\t\tactions: [{ name: \"Switch\" }],\n\t\tdescription: \"\",\n\t\tmatches: [\n\t\t\t{\n\t\t\t\tindices: [\n\t\t\t\t\t[2, 2],\n\t\t\t\t\t[7, 8],\n\t\t\t\t],\n\t\t\t\tvalue: \"auto_afterFeature\",\n\t\t\t},\n\t\t],\n\t\tname: \"auto_afterFeature\",\n\t\tprovider: \"workspaceService.Installed Workspaces\",\n\t\tscore: 0.07,\n\t\ttags: [],\n\t\ttype: \"Workspace\",\n\t},\n\tsearchQuery: \"Te\",\n\tresetSearch: action(\"resetSearch\"),\n};\n\nexport const WithProviderActions = Template.bind({});\nWithProviderActions.args = {\n\tdata: {\n\t\tactions: [\n\t\t\t{\n\t\t\t\tname: \"Launch\",\n\t\t\t\tcolorName: \"Red\",\n\t\t\t\tcolorHex: \"#FF0000\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"Set\",\n\t\t\t\tcolorName: \"Red\",\n\t\t\t\tcolorHex: \"#FF0000\",\n\t\t\t},\n\t\t],\n\t\tdescription: \"The color Red\",\n\t\tmatches: [\n\t\t\t{\n\t\t\t\tindices: [[0, 3]],\n\t\t\t\tvalue: \"Red\",\n\t\t\t},\n\t\t],\n\t\tname: \"Red\",\n\t\tprovider: \"colorSearchProviderService.Colors\",\n\t\tscore: 100,\n\t\ttags: [],\n\t\ttype: \"color\",\n\t},\n\tsearchQuery: \"Red\",\n\tresetSearch: action(\"resetSearch\"),\n};\n\n// with icon\n// without icon\n// with tags\n// with 0 actions\n"]}

package/react/components/search/SearchResults.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import "../../assets/css/menus.css";
+export declare const SearchResults: React.FunctionComponent;

package/react/components/search/SearchResults.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SearchProviderResults } from "./SearchProviderResults";
+import { SearchBestMatch } from "./SearchBestMatch";
+import { useSearch } from "../../hooks/useSearch";
+import "../../assets/css/menus.css";
+export const SearchResults = () => {
+    const { searchResults, searchQuery } = useSearch();
+    // If we had a response from the search client
+    if (searchResults === null || searchResults === void 0 ? void 0 : searchResults.length) {
+        return (
+        // pull out best match into its own component.
+        React.createElement("div", { className: "search-provider-results" },
+            React.createElement(SearchBestMatch, null),
+            searchResults.map((r, i) => (React.createElement(SearchProviderResults, { key: i, providerResponse: r })))));
+        // If we had no response, but we have a valid searchQuery
+    }
+    else {
+        const message = searchQuery && searchQuery !== "" ? "No results" : "Results will display here";
+        return React.createElement("div", { className: "menu-item no-hover informational-state" }, message);
+    }
+};
+//# sourceMappingURL=SearchResults.js.map

package/react/components/search/SearchResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/search/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,CAAC,MAAM,aAAa,GAA4B,GAAG,EAAE;IAC1D,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IAEnD,8CAA8C;IAC9C,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,EAAE;QAC1B,OAAO;QACN,8CAA8C;QAC9C,6BAAK,SAAS,EAAC,yBAAyB;YACvC,oBAAC,eAAe,OAAG;YAClB,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,oBAAC,qBAAqB,IAAC,GAAG,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,GAAI,CACtD,CAAC,CACG,CACN,CAAC;QACF,yDAAyD;KACzD;SAAM;QACN,MAAM,OAAO,GAAG,WAAW,IAAI,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC;QAE/F,OAAO,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC;KAC/E;AACF,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { SearchProviderResults } from \"./SearchProviderResults\";\nimport { SearchBestMatch } from \"./SearchBestMatch\";\nimport { useSearch } from \"../../hooks/useSearch\";\nimport \"../../assets/css/menus.css\";\n\nexport const SearchResults: React.FunctionComponent = () => {\n\tconst { searchResults, searchQuery } = useSearch();\n\n\t// If we had a response from the search client\n\tif (searchResults?.length) {\n\t\treturn (\n\t\t\t// pull out best match into its own component.\n\t\t\t<div className=\"search-provider-results\">\n\t\t\t\t<SearchBestMatch />\n\t\t\t\t{searchResults.map((r, i) => (\n\t\t\t\t\t<SearchProviderResults key={i} providerResponse={r} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t);\n\t\t// If we had no response, but we have a valid searchQuery\n\t} else {\n\t\tconst message = searchQuery && searchQuery !== \"\" ? \"No results\" : \"Results will display here\";\n\n\t\treturn <div className=\"menu-item no-hover informational-state\">{message}</div>;\n\t}\n};\n"]}