@finsemble/finsemble-ui 6.6.3 → 7.0.0-beta-X

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

@@ -0,0 +1,458 @@
+import React from "react";
+import { SearchResults } from "./SearchResults";
+import "../../assets/css/search.css";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { createStore, useDispatch } from "../../store";
+import { SearchActions } from "../../actions/searchActions";
+export default {
+    title: "Search/SearchResults",
+    component: SearchResults,
+};
+const DispatcherBlock = ({ results, query, children }) => {
+    const dispatch = useDispatch();
+    dispatch(SearchActions.UPDATE_RESULTS(results));
+    dispatch(SearchActions.UPDATE_QUERY(query));
+    return children;
+};
+const Template = (args) => {
+    initFSBL(window);
+    return (React.createElement(FinsembleProvider, { store: createStore() },
+        React.createElement(DispatcherBlock, { results: args.results, query: args.query },
+            React.createElement("div", { role: "menu" },
+                React.createElement(SearchResults, null)))));
+};
+export const SomeResults = Template.bind({});
+SomeResults.args = {
+    query: "te",
+    results: [
+        {
+            provider: {
+                displayName: "Installed Workspaces",
+                channel: "workspaceService.Installed Workspaces",
+                providerActionCallback: true,
+            },
+            returnCallback: "Toolbar-1.Installed Workspaces",
+            searchId: "3a5f1c77-d135-4488-8e8d-43b94d469048",
+            data: [
+                {
+                    score: 0.02,
+                    matches: [
+                        {
+                            indices: [
+                                [2, 2],
+                                [7, 7],
+                                [13, 13],
+                            ],
+                            value: "auto_afterFeature",
+                        },
+                    ],
+                    name: "auto_afterFeature",
+                    type: "Workspace",
+                    description: "",
+                    actions: [{ name: "Switch" }],
+                    tags: [],
+                    provider: "workspaceService.Installed Workspaces",
+                },
+                {
+                    score: 0.13682105473575515,
+                    matches: [{ indices: [[6, 6]], value: "Default Workspace" }],
+                    name: "Default Workspace",
+                    type: "Workspace",
+                    description: "",
+                    actions: [{ name: "Switch" }],
+                    tags: [],
+                    provider: "workspaceService.Installed Workspaces",
+                },
+            ],
+        },
+        {
+            provider: {
+                displayName: "Installed Components",
+                channel: "System Manager.Installed Components",
+                providerActionTitle: null,
+                providerActionCallback: true,
+            },
+            returnCallback: "Toolbar-1.Installed Components",
+            searchId: "3a5f1c77-d135-4488-8e8d-43b94d469048",
+            data: [
+                {
+                    name: "Tour",
+                    displayName: "Take a Tour",
+                    score: 0.000018578044550916993,
+                    matches: [
+                        {
+                            indices: [
+                                [0, 0],
+                                [7, 7],
+                            ],
+                            value: "Take a Tour",
+                            key: "component.displayName",
+                        },
+                        { indices: [[0, 0]], value: "Tour", key: "component.type" },
+                    ],
+                    icon: { imageType: "url", path: "http://localhost:3375/build/components/tour/take-a-tour.svg" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "ChartIQ Example App",
+                    displayName: "ChartIQ Example App",
+                    score: 0.024365606715272055,
+                    matches: [
+                        { indices: [[4, 4]], value: "ChartIQ Example App", key: "component.displayName" },
+                        { indices: [[4, 4]], value: "ChartIQ Example App", key: "component.type" },
+                    ],
+                    icon: { imageType: "fonticon", path: "ff-chart-advanced" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "AG-Grid Example Blotter",
+                    displayName: "AG-Grid Example Blotter",
+                    score: 0.14712336702889178,
+                    matches: [
+                        { indices: [[19, 20]], value: "AG-Grid Example Blotter", key: "component.displayName" },
+                        { indices: [[19, 20]], value: "AG-Grid Example Blotter", key: "component.type" },
+                    ],
+                    icon: { imageType: "url", path: "https://assets.finsemble.com/components/ag-grid/ag-grid-logo.png" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+            ],
+        },
+    ],
+};
+export const NoResults = Template.bind({});
+NoResults.args = {
+    query: "test",
+    results: [],
+};
+export const MultiProviderResults = Template.bind({});
+MultiProviderResults.args = {
+    query: "blue",
+    results: [
+        {
+            provider: {
+                displayName: "Colors",
+                channel: "colorSearchProviderService.Colors",
+                providerActionTitle: "Launch Current Color",
+                providerActionCallback: true,
+            },
+            returnCallback: "Toolbar-1.Colors",
+            searchId: "521d822b-14bc-4fba-94d8-cd6dd2bc559d",
+            data: [
+                {
+                    name: "Red",
+                    score: 100,
+                    type: "color",
+                    description: "The color Red",
+                    actions: [
+                        { name: "Launch", colorName: "Red", colorHex: "#FF0000" },
+                        { name: "Set", colorName: "Red", colorHex: "#FF0000" },
+                    ],
+                    provider: "colorSearchProviderService.Colors",
+                },
+                {
+                    name: "Green",
+                    score: 100,
+                    type: "color",
+                    description: "The color Green",
+                    actions: [
+                        { name: "Launch", colorName: "Green", colorHex: "#00FF00" },
+                        { name: "Set", colorName: "Green", colorHex: "#00FF00" },
+                    ],
+                    provider: "colorSearchProviderService.Colors",
+                },
+                {
+                    name: "Blue",
+                    score: 0,
+                    type: "color",
+                    description: "The color Blue",
+                    actions: [
+                        { name: "Launch", colorName: "Blue", colorHex: "#0000FF" },
+                        { name: "Set", colorName: "Blue", colorHex: "#0000FF" },
+                    ],
+                    provider: "colorSearchProviderService.Colors",
+                },
+                {
+                    name: "White",
+                    score: 100,
+                    type: "color",
+                    description: "The color White",
+                    actions: [
+                        { name: "Launch", colorName: "White", colorHex: "#FFFFFF" },
+                        { name: "Set", colorName: "White", colorHex: "#FFFFFF" },
+                    ],
+                    provider: "colorSearchProviderService.Colors",
+                },
+                {
+                    name: "Black",
+                    score: 100,
+                    type: "color",
+                    description: "The color Black",
+                    actions: [
+                        { name: "Launch", colorName: "Black", colorHex: "#000000" },
+                        { name: "Set", colorName: "Black", colorHex: "#000000" },
+                    ],
+                    provider: "colorSearchProviderService.Colors",
+                },
+            ],
+        },
+        {
+            provider: {
+                displayName: "Installed Components",
+                channel: "System Manager.Installed Components",
+                providerActionTitle: null,
+                providerActionCallback: true,
+            },
+            returnCallback: "Toolbar-1.Installed Components",
+            searchId: "521d822b-14bc-4fba-94d8-cd6dd2bc559d",
+            data: [
+                {
+                    name: "Finsemble WPF DemoTesting",
+                    displayName: "Finsemble WPF DemoTesting",
+                    score: 0.2588400021066141,
+                    matches: [
+                        {
+                            indices: [
+                                [4, 4],
+                                [6, 8],
+                                [15, 15],
+                                [19, 19],
+                            ],
+                            value: "Finsemble WPF DemoTesting",
+                            key: "component.displayName",
+                        },
+                        {
+                            indices: [
+                                [4, 4],
+                                [6, 8],
+                                [15, 15],
+                                [19, 19],
+                            ],
+                            value: "Finsemble WPF DemoTesting",
+                            key: "component.type",
+                        },
+                    ],
+                    icon: { imageType: "url", path: "http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "Finsemble WPF Demo",
+                    displayName: "Finsemble WPF Demo",
+                    score: 0.2588400021066141,
+                    matches: [
+                        {
+                            indices: [
+                                [4, 4],
+                                [6, 8],
+                                [15, 15],
+                            ],
+                            value: "Finsemble WPF Demo",
+                            key: "component.displayName",
+                        },
+                        {
+                            indices: [
+                                [4, 4],
+                                [6, 8],
+                                [15, 15],
+                            ],
+                            value: "Finsemble WPF Demo",
+                            key: "component.type",
+                        },
+                    ],
+                    icon: { imageType: "url", path: "http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "Finsemble WPF Demo Core",
+                    displayName: "Finsemble WPF Demo Core",
+                    score: 0.31000000000000005,
+                    matches: [
+                        {
+                            indices: [
+                                [4, 4],
+                                [6, 8],
+                                [15, 15],
+                                [22, 22],
+                            ],
+                            value: "Finsemble WPF Demo Core",
+                            key: "component.displayName",
+                        },
+                        {
+                            indices: [
+                                [4, 4],
+                                [6, 8],
+                                [15, 15],
+                                [22, 22],
+                            ],
+                            value: "Finsemble WPF Demo Core",
+                            key: "component.type",
+                        },
+                    ],
+                    icon: { imageType: "url", path: "http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "Resizable (HTML5) - Enabled",
+                    displayName: "Resizable (HTML5) - Enabled",
+                    score: 0.31000000000000005,
+                    matches: [
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [14, 14],
+                                [20, 20],
+                                [23, 25],
+                            ],
+                            value: "Resizable (HTML5) - Enabled",
+                            key: "component.displayName",
+                        },
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [14, 14],
+                                [20, 20],
+                                [23, 25],
+                            ],
+                            value: "Resizable (HTML5) - Enabled",
+                            key: "component.type",
+                        },
+                    ],
+                    icon: { imageType: "fonticon", path: "ff-component" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "Resizable (HTML5) - Disabled",
+                    displayName: "Resizable (HTML5) - Disabled",
+                    score: 0.31000000000000005,
+                    matches: [
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [14, 14],
+                                [24, 26],
+                            ],
+                            value: "Resizable (HTML5) - Disabled",
+                            key: "component.displayName",
+                        },
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [14, 14],
+                                [24, 26],
+                            ],
+                            value: "Resizable (HTML5) - Disabled",
+                            key: "component.type",
+                        },
+                    ],
+                    icon: { imageType: "fonticon", path: "ff-component" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "Resizable (Native) - Enabled",
+                    displayName: "Resizable (Native) - Enabled",
+                    score: 0.31000000000000005,
+                    matches: [
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [16, 16],
+                                [21, 21],
+                                [24, 26],
+                            ],
+                            value: "Resizable (Native) - Enabled",
+                            key: "component.displayName",
+                        },
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [16, 16],
+                                [21, 21],
+                                [24, 26],
+                            ],
+                            value: "Resizable (Native) - Enabled",
+                            key: "component.type",
+                        },
+                    ],
+                    icon: { imageType: "url", path: "http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+                {
+                    name: "Resizable (Native) - Disabled",
+                    displayName: "Resizable (Native) - Disabled",
+                    score: 0.31000000000000005,
+                    matches: [
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [16, 16],
+                                [25, 27],
+                            ],
+                            value: "Resizable (Native) - Disabled",
+                            key: "component.displayName",
+                        },
+                        {
+                            indices: [
+                                [1, 1],
+                                [6, 8],
+                                [16, 16],
+                                [25, 27],
+                            ],
+                            value: "Resizable (Native) - Disabled",
+                            key: "component.type",
+                        },
+                    ],
+                    icon: { imageType: "url", path: "http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png" },
+                    type: "Application",
+                    description: "",
+                    actions: [{ name: "Spawn" }],
+                    tags: [],
+                    provider: "System Manager.Installed Components",
+                },
+            ],
+        },
+    ],
+};
+//# sourceMappingURL=SearchResults.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.stories.js","sourceRoot":"","sources":["../../../src/components/search/SearchResults.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { SearchResults } from \"./SearchResults\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport \"../../assets/css/search.css\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { createStore, useDispatch } from \"../../store\";\nimport { SearchActions } from \"../../actions/searchActions\";\n\nexport default {\n\ttitle: \"Search/SearchResults\",\n\tcomponent: SearchResults,\n};\n\nconst DispatcherBlock = ({ results, query, children }: any) => {\n\tconst dispatch = useDispatch();\n\tdispatch(SearchActions.UPDATE_RESULTS(results));\n\tdispatch(SearchActions.UPDATE_QUERY(query));\n\n\treturn children;\n};\n\nconst Template: Story<any> = (args: any) => {\n\tinitFSBL(window);\n\n\treturn (\n\t\t<FinsembleProvider store={createStore()}>\n\t\t\t<DispatcherBlock results={args.results} query={args.query}>\n\t\t\t\t<div role=\"menu\">\n\t\t\t\t\t<SearchResults />\n\t\t\t\t</div>\n\t\t\t</DispatcherBlock>\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const SomeResults = Template.bind({});\nSomeResults.args = {\n\tquery: \"te\",\n\tresults: [\n\t\t{\n\t\t\tprovider: {\n\t\t\t\tdisplayName: \"Installed Workspaces\",\n\t\t\t\tchannel: \"workspaceService.Installed Workspaces\",\n\t\t\t\tproviderActionCallback: true,\n\t\t\t},\n\t\t\treturnCallback: \"Toolbar-1.Installed Workspaces\",\n\t\t\tsearchId: \"3a5f1c77-d135-4488-8e8d-43b94d469048\",\n\t\t\tdata: [\n\t\t\t\t{\n\t\t\t\t\tscore: 0.02,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[2, 2],\n\t\t\t\t\t\t\t\t[7, 7],\n\t\t\t\t\t\t\t\t[13, 13],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"auto_afterFeature\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\tname: \"auto_afterFeature\",\n\t\t\t\t\ttype: \"Workspace\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Switch\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"workspaceService.Installed Workspaces\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tscore: 0.13682105473575515,\n\t\t\t\t\tmatches: [{ indices: [[6, 6]], value: \"Default Workspace\" }],\n\t\t\t\t\tname: \"Default Workspace\",\n\t\t\t\t\ttype: \"Workspace\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Switch\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"workspaceService.Installed Workspaces\",\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tprovider: {\n\t\t\t\tdisplayName: \"Installed Components\",\n\t\t\t\tchannel: \"System Manager.Installed Components\",\n\t\t\t\tproviderActionTitle: null,\n\t\t\t\tproviderActionCallback: true,\n\t\t\t},\n\t\t\treturnCallback: \"Toolbar-1.Installed Components\",\n\t\t\tsearchId: \"3a5f1c77-d135-4488-8e8d-43b94d469048\",\n\t\t\tdata: [\n\t\t\t\t{\n\t\t\t\t\tname: \"Tour\",\n\t\t\t\t\tdisplayName: \"Take a Tour\",\n\t\t\t\t\tscore: 0.000018578044550916993,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[0, 0],\n\t\t\t\t\t\t\t\t[7, 7],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Take a Tour\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ indices: [[0, 0]], value: \"Tour\", key: \"component.type\" },\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"url\", path: \"http://localhost:3375/build/components/tour/take-a-tour.svg\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"ChartIQ Example App\",\n\t\t\t\t\tdisplayName: \"ChartIQ Example App\",\n\t\t\t\t\tscore: 0.024365606715272055,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{ indices: [[4, 4]], value: \"ChartIQ Example App\", key: \"component.displayName\" },\n\t\t\t\t\t\t{ indices: [[4, 4]], value: \"ChartIQ Example App\", key: \"component.type\" },\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"fonticon\", path: \"ff-chart-advanced\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"AG-Grid Example Blotter\",\n\t\t\t\t\tdisplayName: \"AG-Grid Example Blotter\",\n\t\t\t\t\tscore: 0.14712336702889178,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{ indices: [[19, 20]], value: \"AG-Grid Example Blotter\", key: \"component.displayName\" },\n\t\t\t\t\t\t{ indices: [[19, 20]], value: \"AG-Grid Example Blotter\", key: \"component.type\" },\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"url\", path: \"https://assets.finsemble.com/components/ag-grid/ag-grid-logo.png\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t],\n};\n\nexport const NoResults = Template.bind({});\nNoResults.args = {\n\tquery: \"test\",\n\tresults: [],\n};\n\nexport const MultiProviderResults = Template.bind({});\nMultiProviderResults.args = {\n\tquery: \"blue\",\n\tresults: [\n\t\t{\n\t\t\tprovider: {\n\t\t\t\tdisplayName: \"Colors\",\n\t\t\t\tchannel: \"colorSearchProviderService.Colors\",\n\t\t\t\tproviderActionTitle: \"Launch Current Color\",\n\t\t\t\tproviderActionCallback: true,\n\t\t\t},\n\t\t\treturnCallback: \"Toolbar-1.Colors\",\n\t\t\tsearchId: \"521d822b-14bc-4fba-94d8-cd6dd2bc559d\",\n\t\t\tdata: [\n\t\t\t\t{\n\t\t\t\t\tname: \"Red\",\n\t\t\t\t\tscore: 100,\n\t\t\t\t\ttype: \"color\",\n\t\t\t\t\tdescription: \"The color Red\",\n\t\t\t\t\tactions: [\n\t\t\t\t\t\t{ name: \"Launch\", colorName: \"Red\", colorHex: \"#FF0000\" },\n\t\t\t\t\t\t{ name: \"Set\", colorName: \"Red\", colorHex: \"#FF0000\" },\n\t\t\t\t\t],\n\t\t\t\t\tprovider: \"colorSearchProviderService.Colors\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Green\",\n\t\t\t\t\tscore: 100,\n\t\t\t\t\ttype: \"color\",\n\t\t\t\t\tdescription: \"The color Green\",\n\t\t\t\t\tactions: [\n\t\t\t\t\t\t{ name: \"Launch\", colorName: \"Green\", colorHex: \"#00FF00\" },\n\t\t\t\t\t\t{ name: \"Set\", colorName: \"Green\", colorHex: \"#00FF00\" },\n\t\t\t\t\t],\n\t\t\t\t\tprovider: \"colorSearchProviderService.Colors\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Blue\",\n\t\t\t\t\tscore: 0,\n\t\t\t\t\ttype: \"color\",\n\t\t\t\t\tdescription: \"The color Blue\",\n\t\t\t\t\tactions: [\n\t\t\t\t\t\t{ name: \"Launch\", colorName: \"Blue\", colorHex: \"#0000FF\" },\n\t\t\t\t\t\t{ name: \"Set\", colorName: \"Blue\", colorHex: \"#0000FF\" },\n\t\t\t\t\t],\n\t\t\t\t\tprovider: \"colorSearchProviderService.Colors\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"White\",\n\t\t\t\t\tscore: 100,\n\t\t\t\t\ttype: \"color\",\n\t\t\t\t\tdescription: \"The color White\",\n\t\t\t\t\tactions: [\n\t\t\t\t\t\t{ name: \"Launch\", colorName: \"White\", colorHex: \"#FFFFFF\" },\n\t\t\t\t\t\t{ name: \"Set\", colorName: \"White\", colorHex: \"#FFFFFF\" },\n\t\t\t\t\t],\n\t\t\t\t\tprovider: \"colorSearchProviderService.Colors\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Black\",\n\t\t\t\t\tscore: 100,\n\t\t\t\t\ttype: \"color\",\n\t\t\t\t\tdescription: \"The color Black\",\n\t\t\t\t\tactions: [\n\t\t\t\t\t\t{ name: \"Launch\", colorName: \"Black\", colorHex: \"#000000\" },\n\t\t\t\t\t\t{ name: \"Set\", colorName: \"Black\", colorHex: \"#000000\" },\n\t\t\t\t\t],\n\t\t\t\t\tprovider: \"colorSearchProviderService.Colors\",\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\tprovider: {\n\t\t\t\tdisplayName: \"Installed Components\",\n\t\t\t\tchannel: \"System Manager.Installed Components\",\n\t\t\t\tproviderActionTitle: null,\n\t\t\t\tproviderActionCallback: true,\n\t\t\t},\n\t\t\treturnCallback: \"Toolbar-1.Installed Components\",\n\t\t\tsearchId: \"521d822b-14bc-4fba-94d8-cd6dd2bc559d\",\n\t\t\tdata: [\n\t\t\t\t{\n\t\t\t\t\tname: \"Finsemble WPF DemoTesting\",\n\t\t\t\t\tdisplayName: \"Finsemble WPF DemoTesting\",\n\t\t\t\t\tscore: 0.2588400021066141,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[4, 4],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[15, 15],\n\t\t\t\t\t\t\t\t[19, 19],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Finsemble WPF DemoTesting\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[4, 4],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[15, 15],\n\t\t\t\t\t\t\t\t[19, 19],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Finsemble WPF DemoTesting\",\n\t\t\t\t\t\t\tkey: \"component.type\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"url\", path: \"http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Finsemble WPF Demo\",\n\t\t\t\t\tdisplayName: \"Finsemble WPF Demo\",\n\t\t\t\t\tscore: 0.2588400021066141,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[4, 4],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[15, 15],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Finsemble WPF Demo\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[4, 4],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[15, 15],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Finsemble WPF Demo\",\n\t\t\t\t\t\t\tkey: \"component.type\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"url\", path: \"http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Finsemble WPF Demo Core\",\n\t\t\t\t\tdisplayName: \"Finsemble WPF Demo Core\",\n\t\t\t\t\tscore: 0.31000000000000005,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[4, 4],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[15, 15],\n\t\t\t\t\t\t\t\t[22, 22],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Finsemble WPF Demo Core\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[4, 4],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[15, 15],\n\t\t\t\t\t\t\t\t[22, 22],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Finsemble WPF Demo Core\",\n\t\t\t\t\t\t\tkey: \"component.type\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"url\", path: \"http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Resizable (HTML5) - Enabled\",\n\t\t\t\t\tdisplayName: \"Resizable (HTML5) - Enabled\",\n\t\t\t\t\tscore: 0.31000000000000005,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[14, 14],\n\t\t\t\t\t\t\t\t[20, 20],\n\t\t\t\t\t\t\t\t[23, 25],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (HTML5) - Enabled\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[14, 14],\n\t\t\t\t\t\t\t\t[20, 20],\n\t\t\t\t\t\t\t\t[23, 25],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (HTML5) - Enabled\",\n\t\t\t\t\t\t\tkey: \"component.type\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"fonticon\", path: \"ff-component\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Resizable (HTML5) - Disabled\",\n\t\t\t\t\tdisplayName: \"Resizable (HTML5) - Disabled\",\n\t\t\t\t\tscore: 0.31000000000000005,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[14, 14],\n\t\t\t\t\t\t\t\t[24, 26],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (HTML5) - Disabled\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[14, 14],\n\t\t\t\t\t\t\t\t[24, 26],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (HTML5) - Disabled\",\n\t\t\t\t\t\t\tkey: \"component.type\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"fonticon\", path: \"ff-component\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Resizable (Native) - Enabled\",\n\t\t\t\t\tdisplayName: \"Resizable (Native) - Enabled\",\n\t\t\t\t\tscore: 0.31000000000000005,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[16, 16],\n\t\t\t\t\t\t\t\t[21, 21],\n\t\t\t\t\t\t\t\t[24, 26],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (Native) - Enabled\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[16, 16],\n\t\t\t\t\t\t\t\t[21, 21],\n\t\t\t\t\t\t\t\t[24, 26],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (Native) - Enabled\",\n\t\t\t\t\t\t\tkey: \"component.type\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"url\", path: \"http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Resizable (Native) - Disabled\",\n\t\t\t\t\tdisplayName: \"Resizable (Native) - Disabled\",\n\t\t\t\t\tscore: 0.31000000000000005,\n\t\t\t\t\tmatches: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[16, 16],\n\t\t\t\t\t\t\t\t[25, 27],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (Native) - Disabled\",\n\t\t\t\t\t\t\tkey: \"component.displayName\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tindices: [\n\t\t\t\t\t\t\t\t[1, 1],\n\t\t\t\t\t\t\t\t[6, 8],\n\t\t\t\t\t\t\t\t[16, 16],\n\t\t\t\t\t\t\t\t[25, 27],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tvalue: \"Resizable (Native) - Disabled\",\n\t\t\t\t\t\t\tkey: \"component.type\",\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t\ticon: { imageType: \"url\", path: \"http://localhost:3375/build/assets/img/Finsemble_Taskbar_Icon.png\" },\n\t\t\t\t\ttype: \"Application\",\n\t\t\t\t\tdescription: \"\",\n\t\t\t\t\tactions: [{ name: \"Spawn\" }],\n\t\t\t\t\ttags: [],\n\t\t\t\t\tprovider: \"System Manager.Installed Components\",\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t],\n};\n"]}

package/react/components/shared/Animate.d.ts

@@ -6,5 +6,10 @@ interface Props {
     animateOut?: string;
     animateOutComplete?: Function;
 }
+/**
+ * Animate the child component
+ * props have default values attached in the component
+ * @param props
+ */
 export default function Animate(props: Props): JSX.Element;
 export {};

package/react/components/shared/Animate.js

@@ -1,6 +1,12 @@
 import * as React from "react";
 const { useState, useEffect } = React;
+/**
+ * Animate the child component
+ * props have default values attached in the component
+ * @param props
+ */
 export default function Animate(props) {
+    // provide some defaults to ensure it still works even though it is blank
     const { animateIn, animateOut, displayDuration, animateOutComplete = () => {
         ("");
     }, } = props;
@@ -12,11 +18,16 @@ export default function Animate(props) {
                 animateOut && setCSS(animateOut);
             }, displayDuration);
         }
+        // this will clear Timeout when component unmount like in willComponentUnmount
         return () => {
             timer1 && clearTimeout(timer1);
             animateOut && setCSS(animateOut);
         };
-    }, [animateOut, displayDuration, props.displayDuration]);
+    }, [animateOut, displayDuration, props.displayDuration]
+    // eslint-disable-line
+    //useEffect will run only one time
+    //if you pass a value to array, like this [data] than clearTimeout will run every time this value changes (useEffect re-run)
+    );
     const hideChildElement = () => {
         css === animateOut && animateOutComplete();
     };

package/react/components/shared/Animate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Animate.js","sourceRoot":"","sources":["../../../src/components/shared/Animate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;AActC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAY;IAE3C,MAAM,EACL,SAAS,EACT,UAAU,EACV,eAAe,EACf,kBAAkB,GAAG,GAAG,EAAE;QACzB,CAAC,EAAE,CAAC,CAAC;IACN,CAAC,GACD,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;IAEhD,SAAS,CACR,GAAG,EAAE;QACJ,IAAI,MAAM,GAA0B,IAAI,CAAC;QACzC,IAAI,KAAK,CAAC,eAAe,EAAE;YAC1B,MAAM,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxB,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;YAClC,CAAC,EAAE,eAAe,CAAC,CAAC;SACpB;QAGD,OAAO,GAAG,EAAE;YACX,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;YAC/B,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,CAAC,CAIpD,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC7B,GAAG,KAAK,UAAU,IAAI,kBAAkB,EAAE,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,gBAAgB,IACnD,KAAK,CAAC,QAAQ,CACV,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nconst { useState, useEffect } = React;\n\ninterface Props {\n\tchildren?: React.PropsWithChildren<any>;\n\tdisplayDuration?: number;\n\tanimateIn?: string;\n\tanimateOut?: string;\n\tanimateOutComplete?: Function;\n}\n/**\n * Animate the child component\n * props have default values attached in the component\n * @param props\n */\nexport default function Animate(props: Props) {\n\t// provide some defaults to ensure it still works even though it is blank\n\tconst {\n\t\tanimateIn,\n\t\tanimateOut,\n\t\tdisplayDuration,\n\t\tanimateOutComplete = () => {\n\t\t\t(\"\");\n\t\t},\n\t} = props;\n\tconst [css, setCSS] = useState(animateIn || \"\");\n\n\tuseEffect(\n\t\t() => {\n\t\t\tlet timer1: null | NodeJS.Timeout = null;\n\t\t\tif (props.displayDuration) {\n\t\t\t\ttimer1 = setTimeout(() => {\n\t\t\t\t\tanimateOut && setCSS(animateOut);\n\t\t\t\t}, displayDuration);\n\t\t\t}\n\n\t\t\t// this will clear Timeout when component unmount like in willComponentUnmount\n\t\t\treturn () => {\n\t\t\t\ttimer1 && clearTimeout(timer1);\n\t\t\t\tanimateOut && setCSS(animateOut);\n\t\t\t};\n\t\t},\n\t\t[animateOut, displayDuration, props.displayDuration]\n\t\t// eslint-disable-line\n\t\t//useEffect will run only one time\n\t\t//if you pass a value to array, like this [data] than clearTimeout will run every time this value changes (useEffect re-run)\n\t);\n\n\tconst hideChildElement = () => {\n\t\tcss === animateOut && animateOutComplete();\n\t};\n\n\treturn (\n\t\t<div className={css} onAnimationEnd={hideChildElement}>\n\t\t\t{props.children}\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"file":"Animate.js","sourceRoot":"","sources":["../../../src/components/shared/Animate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;AAStC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAY;IAC3C,yEAAyE;IACzE,MAAM,EACL,SAAS,EACT,UAAU,EACV,eAAe,EACf,kBAAkB,GAAG,GAAG,EAAE;QACzB,CAAC,EAAE,CAAC,CAAC;IACN,CAAC,GACD,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;IAEhD,SAAS,CACR,GAAG,EAAE;QACJ,IAAI,MAAM,GAA0B,IAAI,CAAC;QACzC,IAAI,KAAK,CAAC,eAAe,EAAE;YAC1B,MAAM,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxB,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;YAClC,CAAC,EAAE,eAAe,CAAC,CAAC;SACpB;QAED,8EAA8E;QAC9E,OAAO,GAAG,EAAE;YACX,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;YAC/B,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,CAAC;IACpD,sBAAsB;IACtB,kCAAkC;IAClC,4HAA4H;KAC5H,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC7B,GAAG,KAAK,UAAU,IAAI,kBAAkB,EAAE,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,gBAAgB,IACnD,KAAK,CAAC,QAAQ,CACV,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nconst { useState, useEffect } = React;\n\ninterface Props {\n\tchildren?: React.PropsWithChildren<any>;\n\tdisplayDuration?: number;\n\tanimateIn?: string;\n\tanimateOut?: string;\n\tanimateOutComplete?: Function;\n}\n/**\n * Animate the child component\n * props have default values attached in the component\n * @param props\n */\nexport default function Animate(props: Props) {\n\t// provide some defaults to ensure it still works even though it is blank\n\tconst {\n\t\tanimateIn,\n\t\tanimateOut,\n\t\tdisplayDuration,\n\t\tanimateOutComplete = () => {\n\t\t\t(\"\");\n\t\t},\n\t} = props;\n\tconst [css, setCSS] = useState(animateIn || \"\");\n\n\tuseEffect(\n\t\t() => {\n\t\t\tlet timer1: null | NodeJS.Timeout = null;\n\t\t\tif (props.displayDuration) {\n\t\t\t\ttimer1 = setTimeout(() => {\n\t\t\t\t\tanimateOut && setCSS(animateOut);\n\t\t\t\t}, displayDuration);\n\t\t\t}\n\n\t\t\t// this will clear Timeout when component unmount like in willComponentUnmount\n\t\t\treturn () => {\n\t\t\t\ttimer1 && clearTimeout(timer1);\n\t\t\t\tanimateOut && setCSS(animateOut);\n\t\t\t};\n\t\t},\n\t\t[animateOut, displayDuration, props.displayDuration]\n\t\t// eslint-disable-line\n\t\t//useEffect will run only one time\n\t\t//if you pass a value to array, like this [data] than clearTimeout will run every time this value changes (useEffect re-run)\n\t);\n\n\tconst hideChildElement = () => {\n\t\tcss === animateOut && animateOutComplete();\n\t};\n\n\treturn (\n\t\t<div className={css} onAnimationEnd={hideChildElement}>\n\t\t\t{props.children}\n\t\t</div>\n\t);\n}\n"]}

package/react/components/shared/DefaultDropdownButton.js

@@ -55,43 +55,63 @@ const DefaultDropdownButton = ({ allowEmpty = true, caretLocation = "left", clas
     const options = buttonOptions.map((option, index) => (React.createElement("div", { key: index, tabIndex: 0, className: "finsemble-dropdown__btn-option", onClick: () => {
             selectOptionByIndex(index);
         }, role: "option", "aria-selected": focusIndex === index }, option.optionLabel)));
-    return (React.createElement("div", { tabIndex: enabled ? 0 : -1, ref: wrapperRef, role: "combobox", "aria-haspopup": optionsVisible, "aria-expanded": optionsVisible, "aria-owns": `default-dropdown_${uniqueId}`, "aria-label": buttonLabel, className: `finsemble-dropdown__btn ${classNames} ${optionsVisible ? "active" : ""}`, onClick: enabled ? () => toggleOptionsPanel(!optionsVisible) : () => { }, onKeyDown: (e) => {
+    return (React.createElement("div", { tabIndex: enabled ? 0 : -1, ref: wrapperRef, role: "combobox", "aria-haspopup": optionsVisible, "aria-expanded": optionsVisible, "aria-owns": `default-dropdown_${uniqueId}`, "aria-label": "combobox", className: `finsemble-dropdown__btn ${classNames} ${optionsVisible ? "active" : ""}`, onClick: enabled ? () => toggleOptionsPanel(!optionsVisible) : () => { }, onKeyDown: (e) => {
             if (!enabled) {
                 return;
             }
             if (optionsVisible) {
+                // Keyboard navigation for the expanded combobox options
                 if (e.key === "Enter" || e.key === " ") {
+                    // Activate the selected option (equiv: click the hovered option)
                     selectOptionByIndex(focusIndex);
                 }
                 else if (e.key === "ArrowDown") {
+                    // Select next option down (equiv: hover over the next option down)
                     setFocusIndex(focusIndex + 1 >= buttonOptions.length ? buttonOptions.length - 1 : focusIndex + 1);
+                    e.preventDefault();
                 }
                 else if (e.key === "ArrowUp") {
+                    // Select next option up (equiv: hover over the next option up)
                     setFocusIndex(focusIndex - 1 <= 0 ? 0 : focusIndex - 1);
+                    e.preventDefault();
                 }
                 else if (e.key === "Escape") {
+                    // Without activating anything, close the options. (equiv: clicking away)
                     toggleOptionsPanel(false);
                     setFocusIndex(0);
+                    e.preventDefault();
                 }
             }
             else {
+                // Keyboard navigation for a collapsed combobox
                 if (e.key === "Enter" || e.key === " ") {
+                    // Expand the combobox
                     toggleOptionsPanel(!optionsVisible);
                     setFocusIndex(0);
+                    e.preventDefault();
                 }
                 else if (e.key === "ArrowDown") {
-                    changeOptionByDirection("down");
+                    if (e.altKey) {
+                        toggleOptionsPanel(!optionsVisible);
+                    }
+                    else {
+                        // Cycle between options (down)
+                        changeOptionByDirection("down");
+                    }
+                    e.preventDefault();
                 }
                 else if (e.key === "ArrowUp") {
+                    // Cycle between options (up)
+                    e.preventDefault();
                     changeOptionByDirection("up");
                 }
             }
         } },
         caretLocation === "left" ? (React.createElement(React.Fragment, null,
-            React.createElement("i", { className: `ff-caret-${optionsVisible ? "up" : "down"}` }),
-            React.createElement("span", { className: "finsemble-dropdown__btn-label" }, selectedValue ? selectedValue.optionLabel : emptyOption.optionLabel))) : (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: "finsemble-dropdown__btn-label" }, selectedValue ? selectedValue.optionLabel : emptyOption.optionLabel),
-            React.createElement("i", { className: `ff-caret-${optionsVisible ? "up" : "down"}` }))),
+            React.createElement("i", { "aria-hidden": "true", className: `ff-caret-${optionsVisible ? "up" : "down"}` }),
+            React.createElement("span", { className: "finsemble-dropdown__btn-label", "aria-label": buttonLabel }, selectedValue ? selectedValue.optionLabel : emptyOption.optionLabel))) : (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "finsemble-dropdown__btn-label", "aria-label": buttonLabel }, selectedValue ? selectedValue.optionLabel : emptyOption.optionLabel),
+            React.createElement("i", { "aria-hidden": "true", className: `ff-caret-${optionsVisible ? "up" : "down"}` }))),
         optionsVisible ? (React.createElement("div", { id: `default-dropdown_${uniqueId}`, className: "finsemble-dropdown__btn-options" }, options)) : null));
 };
 export default DefaultDropdownButton;