@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/toolbar/MinimizeAll.js

@@ -0,0 +1,25 @@
+// disable eslint below because the svg in the icon definition will error if React is not imported
+import * as React from "react"; // eslint-disable-line
+import { useToolbar } from "../../hooks/useToolbar";
+// The default icon for MinimizeAll.
+const MinimizeAllIcon = () => (React.createElement("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "atoms/icons/collapse", transform: "translate(-9.000000, -9.000000)" },
+            React.createElement("g", { id: "collapse-windows", transform: "translate(9.000000, 9.000000)" },
+                React.createElement("path", { d: "M11,12 L11,11 L15,11 L15,1 L5,1 L5,5 L4,5 L4,8 L4,1 C4,0.44771525 4.44771525,1.01453063e-16 5,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,11 C16,11.5522847 15.5522847,12 15,12 L11,12 Z", id: "Combined-Shape", fill: "#8E939F" }),
+                React.createElement("path", { d: "M7,14 L7,13 L11,13 L11,5 L3,5 L3,9 L2,9 L2,11 L2,5 C2,4.44771525 2.44771525,4 3,4 L11,4 C11.5522847,4 12,4.44771525 12,5 L12,13 C12,13.5522847 11.5522847,14 11,14 L7,14 Z", id: "Combined-Shape", fill: "#C6C9CF" }),
+                React.createElement("path", { d: "M1,8 L7,8 C7.55228475,8 8,8.44771525 8,9 L8,15 C8,15.5522847 7.55228475,16 7,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,9 C-6.76353751e-17,8.44771525 0.44771525,8 1,8 Z M1,9 L1,15 L7,15 L7,9 L1,9 Z", id: "Combined-Shape", fill: "#FFFFFF" }))))));
+/**
+ * A button that minimizes all windows on the the user's screen.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export const MinimizeAll = ({ className, children }) => {
+    const { minimizeAllWindows } = useToolbar();
+    const wrapperClasses = `finsemble-toolbar-button icon-only ${className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, title: "Minimize All", onClick: minimizeAllWindows, tabIndex: 0, role: "button", onKeyDown: (e) => {
+            if (["Enter", "Space"].includes(e.key)) {
+                minimizeAllWindows();
+            }
+        } }, children || React.createElement(MinimizeAllIcon, null)));
+};
+//# sourceMappingURL=MinimizeAll.js.map

package/react/components/toolbar/MinimizeAll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimizeAll.js","sourceRoot":"","sources":["../../../src/components/toolbar/MinimizeAll.tsx"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC,CAAC,sBAAsB;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,oCAAoC;AACpC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAC7B,6BAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,4BAA4B;IACnG,2BAAG,EAAE,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;QAC3E,2BAAG,EAAE,EAAC,sBAAsB,EAAC,SAAS,EAAC,iCAAiC;YACvE,2BAAG,EAAE,EAAC,kBAAkB,EAAC,SAAS,EAAC,+BAA+B;gBACjE,8BACC,CAAC,EAAC,yMAAyM,EAC3M,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP;gBACR,8BACC,CAAC,EAAC,4KAA4K,EAC9K,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP;gBACR,8BACC,CAAC,EAAC,sNAAsN,EACxN,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP,CACL,CACD,CACD,CACC,CACN,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAoD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvG,MAAM,EAAE,kBAAkB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC5C,MAAM,cAAc,GAAG,sCAAsC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IAEtF,OAAO,CACN,6BACC,SAAS,EAAE,cAAc,EACzB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;YACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBACvC,kBAAkB,EAAE,CAAC;aACrB;QACF,CAAC,IAEA,QAAQ,IAAI,oBAAC,eAAe,OAAG,CAC3B,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["// disable eslint below because the svg in the icon definition will error if React is not imported\nimport * as React from \"react\"; // eslint-disable-line\nimport { useToolbar } from \"../../hooks/useToolbar\";\n\n// The default icon for MinimizeAll.\nconst MinimizeAllIcon = () => (\n\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<g id=\"Symbols\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n\t\t\t<g id=\"atoms/icons/collapse\" transform=\"translate(-9.000000, -9.000000)\">\n\t\t\t\t<g id=\"collapse-windows\" transform=\"translate(9.000000, 9.000000)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M11,12 L11,11 L15,11 L15,1 L5,1 L5,5 L4,5 L4,8 L4,1 C4,0.44771525 4.44771525,1.01453063e-16 5,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,11 C16,11.5522847 15.5522847,12 15,12 L11,12 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#8E939F\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M7,14 L7,13 L11,13 L11,5 L3,5 L3,9 L2,9 L2,11 L2,5 C2,4.44771525 2.44771525,4 3,4 L11,4 C11.5522847,4 12,4.44771525 12,5 L12,13 C12,13.5522847 11.5522847,14 11,14 L7,14 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#C6C9CF\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1,8 L7,8 C7.55228475,8 8,8.44771525 8,9 L8,15 C8,15.5522847 7.55228475,16 7,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,9 C-6.76353751e-17,8.44771525 0.44771525,8 1,8 Z M1,9 L1,15 L7,15 L7,9 L1,9 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#FFFFFF\"\n\t\t\t\t\t></path>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</g>\n\t</svg>\n);\n\n/**\n * A button that minimizes all windows on the the user's screen.\n * @param {string} [className] - An optional CSS className to append.\n */\nexport const MinimizeAll: React.FunctionComponent<{ className?: string }> = ({ className, children }) => {\n\tconst { minimizeAllWindows } = useToolbar();\n\tconst wrapperClasses = `finsemble-toolbar-button icon-only ${className || \"\"}`.trim();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={wrapperClasses}\n\t\t\ttitle=\"Minimize All\"\n\t\t\tonClick={minimizeAllWindows}\n\t\t\ttabIndex={0}\n\t\t\trole=\"button\"\n\t\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\n\t\t\t\t\tminimizeAllWindows();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{children || <MinimizeAllIcon />}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/toolbar/MinimizeAll.spec.d.ts

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

package/react/components/toolbar/MinimizeAll.spec.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import sinon from "sinon";
+import { Basic } from "./MinimizeAll.stories";
+// 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("<MinimizeAll/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("should display icon", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("svg").exists()).to.be.true;
+    });
+    it("should call minimize action when clicked", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("click");
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should call minimize action when user presses Enter", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "Enter",
+        });
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should call minimize action when user presses Space", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "Space",
+        });
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should not call minimize action when user presses a character other than Enter or Space", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "a",
+        });
+        expect(buttonSpy.calledOnce).to.be.false;
+    });
+});
+//# sourceMappingURL=MinimizeAll.spec.js.map

package/react/components/toolbar/MinimizeAll.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimizeAll.spec.js","sourceRoot":"","sources":["../../../src/components/toolbar/MinimizeAll.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 sinon from \"sinon\";\nimport { Basic } from \"./MinimizeAll.stories\";\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(\"<MinimizeAll/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\tit(\"should display icon\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\texpect(wrapper.find(\"svg\").exists()).to.be.true;\n\t});\n\tit(\"should call minimize action when clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"click\");\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should call minimize action when user presses Enter\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"Enter\",\n\t\t});\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should call minimize action when user presses Space\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"Space\",\n\t\t});\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should not call minimize action when user presses a character other than Enter or Space\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"a\",\n\t\t});\n\t\texpect(buttonSpy.calledOnce).to.be.false;\n\t});\n});\n"]}

package/react/components/toolbar/MinimizeAll.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/favorites.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<{
+        className?: string | undefined;
+    }>;
+};
+export default _default;
+export declare const Basic: Story<any>;

package/react/components/toolbar/MinimizeAll.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { MinimizeAll } from "./MinimizeAll";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { action } from "@storybook/addon-actions";
+import "../../assets/css/favorites.css";
+export default {
+    title: "Toolbar/MinimizeAll",
+    component: MinimizeAll,
+};
+const Template = (args) => {
+    initFSBL(window);
+    // Overwrite mockup for testing purposes
+    FSBL.Clients.WorkspaceClient.minimizeAll = args.action;
+    return (React.createElement(FinsembleProvider, null,
+        React.createElement(MinimizeAll, null)));
+};
+export const Basic = Template.bind({});
+Basic.args = {
+    action: action("minimize"),
+};
+//# sourceMappingURL=MinimizeAll.stories.js.map

package/react/components/toolbar/MinimizeAll.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimizeAll.stories.js","sourceRoot":"","sources":["../../../src/components/toolbar/MinimizeAll.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,gCAAgC,CAAC;AAExC,eAAe;IACd,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,QAAQ,GAAe,CAAC,IAAS,EAAE,EAAE;IAC1C,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,wCAAwC;IACxC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;IAEvD,OAAO,CACN,oBAAC,iBAAiB;QACjB,oBAAC,WAAW,OAAG,CACI,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC,UAAU,CAAC;CAC1B,CAAC","sourcesContent":["import React from \"react\";\nimport { MinimizeAll } from \"./MinimizeAll\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../assets/css/favorites.css\";\n\nexport default {\n\ttitle: \"Toolbar/MinimizeAll\",\n\tcomponent: MinimizeAll,\n};\n\nconst Template: Story<any> = (args: any) => {\n\tinitFSBL(window);\n\n\t// Overwrite mockup for testing purposes\n\tFSBL.Clients.WorkspaceClient.minimizeAll = args.action;\n\n\treturn (\n\t\t<FinsembleProvider>\n\t\t\t<MinimizeAll />\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n\taction: action(\"minimize\"),\n};\n"]}

package/react/components/toolbar/NotificationControl.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * This control is responsible for the toggling of the notifcations drawer.
+ *
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export declare const NotificationControl: React.FunctionComponent<{
+    className?: string;
+}>;

package/react/components/toolbar/NotificationControl.js

@@ -0,0 +1,65 @@
+// disable eslint below because the svg in the icon definition will error if React is not imported
+import * as React from "react"; // eslint-disable-line
+import useNotifications, { initializeCenterToggle } from "../../hooks/useNotifications";
+import { useEffect, useState } from "react";
+import BellIcon from "../shared/BellIcon";
+/**
+ * This control is responsible for the toggling of the notifcations drawer.
+ *
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export const NotificationControl = ({ className, children }) => {
+    const { toggleCenter } = initializeCenterToggle();
+    const { notifications, activeNotifications } = useNotifications({
+        config: {
+            // Get notification sent in previous session
+            notificationsHistory: true,
+        },
+    });
+    const [count, setCount] = useState(activeNotifications(notifications).length);
+    const [showDotIcon, setShowDotIcon] = useState(true);
+    const [showDotForMuted, setShowDotForMuted] = useState(false);
+    useEffect(() => {
+        async function getNotificationsPreferences() {
+            return await FSBL.Clients.NotificationClient.getPreferences();
+        }
+        getNotificationsPreferences().then((preferences) => {
+            setShowDotIcon(!preferences.disableDotOnToolbarIcon);
+            setShowDotForMuted(preferences.showDotOnToolbarIconForMutedNotifications);
+        });
+    }, []);
+    useEffect(() => {
+        async function computeDotIcon(error, response) {
+            var _a, _b;
+            if (error) {
+                console.error("FinsembleUserPreferencesChannel: ", error);
+            }
+            else {
+                const { data } = response;
+                if ((_a = data === null || data === void 0 ? void 0 : data.notificationPreferences) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("disableDotOnToolbarIcon")) {
+                    setShowDotIcon(!data.notificationPreferences.disableDotOnToolbarIcon);
+                }
+                if ((_b = data === null || data === void 0 ? void 0 : data.notificationPreferences) === null || _b === void 0 ? void 0 : _b.hasOwnProperty("showDotOnToolbarIconForMutedNotifications")) {
+                    setShowDotForMuted(data.notificationPreferences.showDotOnToolbarIconForMutedNotifications);
+                }
+            }
+        }
+        FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", computeDotIcon);
+        return () => {
+            FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", computeDotIcon);
+        };
+    }, []);
+    useEffect(() => {
+        let applyMuteFilterOverride = !showDotForMuted;
+        setCount(activeNotifications(notifications, applyMuteFilterOverride).length);
+    }, [notifications]);
+    const wrapperClasses = `finsemble-toolbar-button icon-only ${className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, title: "Notification Control", onClick: toggleCenter, tabIndex: 0, role: "button", onKeyDown: (e) => {
+            if (["Enter", "Space"].includes(e.key)) {
+                toggleCenter();
+            }
+        } },
+        showDotIcon && count > 0 && React.createElement("div", { className: "notification-alert-dot" }),
+        children || React.createElement(BellIcon, null)));
+};
+//# sourceMappingURL=NotificationControl.js.map

package/react/components/toolbar/NotificationControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationControl.js","sourceRoot":"","sources":["../../../src/components/toolbar/NotificationControl.tsx"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC,CAAC,sBAAsB;AACtD,OAAO,gBAAgB,EAAE,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAoD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/G,MAAM,EAAE,YAAY,EAAE,GAAG,sBAAsB,EAAE,CAAC;IAClD,MAAM,EAAE,aAAa,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,CAAC;QAC/D,MAAM,EAAE;YACP,4CAA4C;YAC5C,oBAAoB,EAAE,IAAI;SAC1B;KACD,CAAC,CAAC;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,UAAU,2BAA2B;YACzC,OAAO,MAAM,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,EAAE,CAAC;QAC/D,CAAC;QAED,2BAA2B,EAAE,CAAC,IAAI,CAAC,CAAC,WAAgB,EAAE,EAAE;YACvD,cAAc,CAAC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;YACrD,kBAAkB,CAAC,WAAW,CAAC,yCAAyC,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,UAAU,cAAc,CAAC,KAAU,EAAE,QAAa;;YACtD,IAAI,KAAK,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAC;aAC1D;iBAAM;gBACN,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAC;gBAC1B,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,uBAAuB,0CAAE,cAAc,CAAC,yBAAyB,CAAC,EAAE;oBAC7E,cAAc,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,uBAAuB,CAAC,CAAC;iBACtE;gBACD,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,uBAAuB,0CAAE,cAAc,CAAC,2CAA2C,CAAC,EAAE;oBAC/F,kBAAkB,CAAC,IAAI,CAAC,uBAAuB,CAAC,yCAAyC,CAAC,CAAC;iBAC3F;aACD;QACF,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,iCAAiC,EAAE,cAAc,CAAC,CAAC;QAEzF,OAAO,GAAG,EAAE;YACX,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,CAAC,iCAAiC,EAAE,cAAc,CAAC,CAAC;QAC7F,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,uBAAuB,GAAG,CAAC,eAAe,CAAC;QAC/C,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,sCAAsC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACtF,OAAO,CACN,6BACC,SAAS,EAAE,cAAc,EACzB,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;YACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBACvC,YAAY,EAAE,CAAC;aACf;QACF,CAAC;QAEA,WAAW,IAAI,KAAK,GAAG,CAAC,IAAI,6BAAK,SAAS,EAAC,wBAAwB,GAAG;QACtE,QAAQ,IAAI,oBAAC,QAAQ,OAAG,CACpB,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["// disable eslint below because the svg in the icon definition will error if React is not imported\nimport * as React from \"react\"; // eslint-disable-line\nimport useNotifications, { initializeCenterToggle } from \"../../hooks/useNotifications\";\nimport { useEffect, useState } from \"react\";\nimport BellIcon from \"../shared/BellIcon\";\n\n/**\n * This control is responsible for the toggling of the notifcations drawer.\n *\n * @param {string} [className] - An optional CSS className to append.\n */\nexport const NotificationControl: React.FunctionComponent<{ className?: string }> = ({ className, children }) => {\n\tconst { toggleCenter } = initializeCenterToggle();\n\tconst { notifications, activeNotifications } = useNotifications({\n\t\tconfig: {\n\t\t\t// Get notification sent in previous session\n\t\t\tnotificationsHistory: true,\n\t\t},\n\t});\n\tconst [count, setCount] = useState(activeNotifications(notifications).length);\n\tconst [showDotIcon, setShowDotIcon] = useState(true);\n\tconst [showDotForMuted, setShowDotForMuted] = useState(false);\n\n\tuseEffect(() => {\n\t\tasync function getNotificationsPreferences() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\n\t\t}\n\n\t\tgetNotificationsPreferences().then((preferences: any) => {\n\t\t\tsetShowDotIcon(!preferences.disableDotOnToolbarIcon);\n\t\t\tsetShowDotForMuted(preferences.showDotOnToolbarIconForMutedNotifications);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tasync function computeDotIcon(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleUserPreferencesChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (data?.notificationPreferences?.hasOwnProperty(\"disableDotOnToolbarIcon\")) {\n\t\t\t\t\tsetShowDotIcon(!data.notificationPreferences.disableDotOnToolbarIcon);\n\t\t\t\t}\n\t\t\t\tif (data?.notificationPreferences?.hasOwnProperty(\"showDotOnToolbarIconForMutedNotifications\")) {\n\t\t\t\t\tsetShowDotForMuted(data.notificationPreferences.showDotOnToolbarIconForMutedNotifications);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleUserPreferencesChannel\", computeDotIcon);\n\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleUserPreferencesChannel\", computeDotIcon);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tlet applyMuteFilterOverride = !showDotForMuted;\n\t\tsetCount(activeNotifications(notifications, applyMuteFilterOverride).length);\n\t}, [notifications]);\n\n\tconst wrapperClasses = `finsemble-toolbar-button icon-only ${className || \"\"}`.trim();\n\treturn (\n\t\t<div\n\t\t\tclassName={wrapperClasses}\n\t\t\ttitle=\"Notification Control\"\n\t\t\tonClick={toggleCenter}\n\t\t\ttabIndex={0}\n\t\t\trole=\"button\"\n\t\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\n\t\t\t\t\ttoggleCenter();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{showDotIcon && count > 0 && <div className=\"notification-alert-dot\" />}\n\t\t\t{children || <BellIcon />}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/toolbar/RevealAll.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * A button that reveals (brings to front but does not unminimize) all Finsemble windows.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export declare const RevealAll: React.FunctionComponent<{
+    className?: string;
+}>;

package/react/components/toolbar/RevealAll.js

@@ -0,0 +1,27 @@
+// disable eslint below because the svg in the icon definition will error if React is not imported
+import * as React from "react"; // eslint-disable-line
+import { useToolbar } from "../../hooks/useToolbar";
+// The default icon for RevealAll.
+const RevealAllIcon = () => (React.createElement("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "atoms/icons/to-front", transform: "translate(-9.000000, -9.000000)" },
+            React.createElement("g", { id: "To-Front", transform: "translate(9.000000, 9.000000)" },
+                React.createElement("path", { d: "M7,5.5 L7,5 L6,5 L6,1 L1,1 L1,6 L5,6 L5,7 L6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,5.5 Z", id: "Combined-Shape", fill: "#8E939F" }),
+                React.createElement("path", { d: "M10.5,7 L11,7 L11,6 L15,6 L15,1 L10,1 L10,4 L9,4 L9,5 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10.5,7 Z", id: "Combined-Shape", fill: "#8E939F" }),
+                React.createElement("path", { d: "M10,9 L15,9 C15.5522847,9 16,9.44771525 16,10 L16,15 C16,15.5522847 15.5522847,16 15,16 L10,16 C9.44771525,16 9,15.5522847 9,15 L9,11 L9,12 L10,12 L10,15 L15,15 L15,10 L11,10 L11,9 L10,9 Z", id: "Combined-Shape", fill: "#8E939F" }),
+                React.createElement("path", { d: "M6,9 L5,9 L5,10 L1,10 L1,15 L6,15 L6,11 L7,11 L7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 L6,9 Z", id: "Combined-Shape", fill: "#8E939F" }),
+                React.createElement("path", { d: "M5,4 L11,4 C11.5522847,4 12,4.44771525 12,5 L12,11 C12,11.5522847 11.5522847,12 11,12 L5,12 C4.44771525,12 4,11.5522847 4,11 L4,5 C4,4.44771525 4.44771525,4 5,4 Z M5,5 L5,11 L11,11 L11,5 L5,5 Z", id: "Combined-Shape", fill: "#FFFFFF" }))))));
+/**
+ * A button that reveals (brings to front but does not unminimize) all Finsemble windows.
+ * @param {string} [className] - An optional CSS className to append.
+ */
+export const RevealAll = ({ className, children }) => {
+    const { revealAllWindows } = useToolbar();
+    const wrapperClasses = `finsemble-toolbar-button icon-only ${className || ""} `.trim();
+    return (React.createElement("div", { className: wrapperClasses, title: "Reveal All", onClick: revealAllWindows, tabIndex: 0, role: "button", onKeyDown: (e) => {
+            if (["Enter", "Space"].includes(e.key)) {
+                revealAllWindows();
+            }
+        } }, children || React.createElement(RevealAllIcon, null)));
+};
+//# sourceMappingURL=RevealAll.js.map

package/react/components/toolbar/RevealAll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealAll.js","sourceRoot":"","sources":["../../../src/components/toolbar/RevealAll.tsx"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC,CAAC,sBAAsB;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,kCAAkC;AAClC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC3B,6BAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,4BAA4B;IACnG,2BAAG,EAAE,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;QAC3E,2BAAG,EAAE,EAAC,sBAAsB,EAAC,SAAS,EAAC,iCAAiC;YACvE,2BAAG,EAAE,EAAC,UAAU,EAAC,SAAS,EAAC,+BAA+B;gBACzD,8BACC,CAAC,EAAC,2NAA2N,EAC7N,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP;gBACR,8BACC,CAAC,EAAC,+MAA+M,EACjN,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP;gBACR,8BACC,CAAC,EAAC,8LAA8L,EAChM,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP;gBACR,8BACC,CAAC,EAAC,0MAA0M,EAC5M,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP;gBACR,8BACC,CAAC,EAAC,mMAAmM,EACrM,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,SAAS,GACP,CACL,CACD,CACD,CACC,CACN,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAoD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrG,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC1C,MAAM,cAAc,GAAG,sCAAsC,SAAS,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;IAEvF,OAAO,CACN,6BACC,SAAS,EAAE,cAAc,EACzB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;YACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBACvC,gBAAgB,EAAE,CAAC;aACnB;QACF,CAAC,IAEA,QAAQ,IAAI,oBAAC,aAAa,OAAG,CACzB,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["// disable eslint below because the svg in the icon definition will error if React is not imported\nimport * as React from \"react\"; // eslint-disable-line\nimport { useToolbar } from \"../../hooks/useToolbar\";\n\n// The default icon for RevealAll.\nconst RevealAllIcon = () => (\n\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<g id=\"Symbols\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n\t\t\t<g id=\"atoms/icons/to-front\" transform=\"translate(-9.000000, -9.000000)\">\n\t\t\t\t<g id=\"To-Front\" transform=\"translate(9.000000, 9.000000)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M7,5.5 L7,5 L6,5 L6,1 L1,1 L1,6 L5,6 L5,7 L6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,5.5 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#8E939F\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10.5,7 L11,7 L11,6 L15,6 L15,1 L10,1 L10,4 L9,4 L9,5 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10.5,7 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#8E939F\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10,9 L15,9 C15.5522847,9 16,9.44771525 16,10 L16,15 C16,15.5522847 15.5522847,16 15,16 L10,16 C9.44771525,16 9,15.5522847 9,15 L9,11 L9,12 L10,12 L10,15 L15,15 L15,10 L11,10 L11,9 L10,9 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#8E939F\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M6,9 L5,9 L5,10 L1,10 L1,15 L6,15 L6,11 L7,11 L7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 L6,9 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#8E939F\"\n\t\t\t\t\t></path>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M5,4 L11,4 C11.5522847,4 12,4.44771525 12,5 L12,11 C12,11.5522847 11.5522847,12 11,12 L5,12 C4.44771525,12 4,11.5522847 4,11 L4,5 C4,4.44771525 4.44771525,4 5,4 Z M5,5 L5,11 L11,11 L11,5 L5,5 Z\"\n\t\t\t\t\t\tid=\"Combined-Shape\"\n\t\t\t\t\t\tfill=\"#FFFFFF\"\n\t\t\t\t\t></path>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</g>\n\t</svg>\n);\n\n/**\n * A button that reveals (brings to front but does not unminimize) all Finsemble windows.\n * @param {string} [className] - An optional CSS className to append.\n */\nexport const RevealAll: React.FunctionComponent<{ className?: string }> = ({ className, children }) => {\n\tconst { revealAllWindows } = useToolbar();\n\tconst wrapperClasses = `finsemble-toolbar-button icon-only ${className || \"\"} `.trim();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={wrapperClasses}\n\t\t\ttitle=\"Reveal All\"\n\t\t\tonClick={revealAllWindows}\n\t\t\ttabIndex={0}\n\t\t\trole=\"button\"\n\t\t\tonKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif ([\"Enter\", \"Space\"].includes(e.key)) {\n\t\t\t\t\trevealAllWindows();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{children || <RevealAllIcon />}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/toolbar/RevealAll.spec.d.ts

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

package/react/components/toolbar/RevealAll.spec.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import sinon from "sinon";
+import { Basic } from "./RevealAll.stories";
+// 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("<RevealAll/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("should display icon", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("svg").exists()).to.be.true;
+    });
+    it("should call reveal action when clicked", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("click");
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should call reveal action when user presses Enter", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "Enter",
+        });
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should call reveal action when user presses Space", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "Space",
+        });
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should not call reveal action when user presses a character other than Enter or Space", () => {
+        const buttonSpy = sinon.spy(Basic.args, "action");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keydown", {
+            key: "a",
+        });
+        expect(buttonSpy.calledOnce).to.be.false;
+    });
+});
+//# sourceMappingURL=RevealAll.spec.js.map

package/react/components/toolbar/RevealAll.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealAll.spec.js","sourceRoot":"","sources":["../../../src/components/toolbar/RevealAll.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 sinon from \"sinon\";\nimport { Basic } from \"./RevealAll.stories\";\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(\"<RevealAll/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\tit(\"should display icon\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\texpect(wrapper.find(\"svg\").exists()).to.be.true;\n\t});\n\tit(\"should call reveal action when clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"click\");\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should call reveal action when user presses Enter\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"Enter\",\n\t\t});\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should call reveal action when user presses Space\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"Space\",\n\t\t});\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should not call reveal action when user presses a character other than Enter or Space\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"action\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keydown\", {\n\t\t\tkey: \"a\",\n\t\t});\n\t\texpect(buttonSpy.calledOnce).to.be.false;\n\t});\n});\n"]}

package/react/components/toolbar/RevealAll.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/favorites.css";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<{
+        className?: string | undefined;
+    }>;
+};
+export default _default;
+export declare const Basic: Story<any>;

package/react/components/toolbar/RevealAll.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { RevealAll } from "./RevealAll";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { action } from "@storybook/addon-actions";
+import "../../assets/css/favorites.css";
+export default {
+    title: "Toolbar/RevealAll",
+    component: RevealAll,
+};
+const Template = (args) => {
+    initFSBL(window);
+    // Overwrite mockup for testing purposes
+    FSBL.Clients.WorkspaceClient.bringWindowsToFront = args.action;
+    return (React.createElement(FinsembleProvider, null,
+        React.createElement(RevealAll, null)));
+};
+export const Basic = Template.bind({});
+Basic.args = {
+    action: action("bring to front"),
+};
+//# sourceMappingURL=RevealAll.stories.js.map

package/react/components/toolbar/RevealAll.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealAll.stories.js","sourceRoot":"","sources":["../../../src/components/toolbar/RevealAll.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,gCAAgC,CAAC;AAExC,eAAe;IACd,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,QAAQ,GAAe,CAAC,IAAS,EAAE,EAAE;IAC1C,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,wCAAwC;IACxC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,mBAAmB,GAAG,IAAI,CAAC,MAAM,CAAC;IAE/D,OAAO,CACN,oBAAC,iBAAiB;QACjB,oBAAC,SAAS,OAAG,CACM,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC,gBAAgB,CAAC;CAChC,CAAC","sourcesContent":["import React from \"react\";\nimport { RevealAll } from \"./RevealAll\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../assets/css/favorites.css\";\n\nexport default {\n\ttitle: \"Toolbar/RevealAll\",\n\tcomponent: RevealAll,\n};\n\nconst Template: Story<any> = (args: any) => {\n\tinitFSBL(window);\n\n\t// Overwrite mockup for testing purposes\n\tFSBL.Clients.WorkspaceClient.bringWindowsToFront = args.action;\n\n\treturn (\n\t\t<FinsembleProvider>\n\t\t\t<RevealAll />\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n\taction: action(\"bring to front\"),\n};\n"]}

package/react/components/toolbar/SddButton.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+/**
+ * A button that launches the Smart Desktop Designer.
+ * If the SDD is not enabled, the button does not appear.
+ */
+export declare const SddButton: React.FunctionComponent;

package/react/components/toolbar/SddButton.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+const SddIcon = () => (React.createElement("svg", { width: "15px", height: "15px", version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100" },
+    React.createElement("g", null,
+        React.createElement("path", { d: "M48,98.4c-0.5,0-1.1-0.1-1.5-0.4L17,83.6c-1.1-0.6-1.9-1.7-1.9-2.9c-0.1-1.2,0.5-2.4,1.5-3.1L71.2,41\n\t\t\t\tc1-0.7,2.4-0.8,3.5-0.2c1.1,0.6,1.9,1.7,1.9,2.9l2.2,32.8c0.1,1.2-0.5,2.4-1.5,3.1L50,97.9C49.4,98.2,48.7,98.4,48,98.4z M25.5,80\n\t\t\t\tl22.2,10.9l23.9-16l-1.6-24.7L25.5,80z" }),
+        React.createElement("path", { d: "M26.8,59.6c-0.5,0-1.1-0.1-1.5-0.4c-1.1-0.6-1.9-1.7-1.9-2.9l-2.2-32.8c-0.1-1.2,0.5-2.4,1.5-3.1L50,2.1\n\t\t\t\tc1-0.7,2.4-0.8,3.5-0.2L83,16.4c1.1,0.6,1.9,1.7,1.9,2.9s-0.5,2.4-1.5,3.1L28.8,59C28.2,59.4,27.5,59.6,26.8,59.6z M28.3,25.1\n\t\t\t\tl1.6,24.7L74.5,20L52.2,9.1L28.3,25.1z" }))));
+/**
+ * A button that launches the Smart Desktop Designer.
+ * If the SDD is not enabled, the button does not appear.
+ */
+export const SddButton = () => {
+    const [showSddButton, setShowSddButton] = React.useState(false);
+    React.useEffect(() => {
+        FSBL.System.getFEAInfo(({ sddEnabled }) => {
+            setShowSddButton(sddEnabled);
+        });
+    }, []);
+    const clickEvent = () => {
+        FSBL.Clients.LauncherClient.spawn("smartDesktopDesigner", { addToWorkspace: false });
+    };
+    return showSddButton ? (React.createElement("span", { title: "Smart Desktop Designer", className: "finsemble-toolbar-button left", role: "button", tabIndex: 0, onClick: clickEvent, onKeyDown: (e) => {
+            if (e.key === "Enter") {
+                clickEvent();
+            }
+        } },
+        React.createElement(SddIcon, null))) : (React.createElement(React.Fragment, null));
+};
+//# sourceMappingURL=SddButton.js.map

package/react/components/toolbar/SddButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SddButton.js","sourceRoot":"","sources":["../../../src/components/toolbar/SddButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CACrB,6BAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;IACrG;QACC,8BACC,CAAC,EAAC,yRAEoC,GACrC;QACF,8BACC,CAAC,EAAC,wRAEoC,GACrC,CACC,CACC,CACN,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAA4B,GAAG,EAAE;IACtD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,UAAU,EAA2B,EAAE,EAAE;YAClE,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;IACtF,CAAC,CAAC;IAEF,OAAO,aAAa,CAAC,CAAC,CAAC,CACtB,8BACC,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,CAAC,CAAsB,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACtB,UAAU,EAAE,CAAC;aACb;QACF,CAAC;QAED,oBAAC,OAAO,OAAG,CACL,CACP,CAAC,CAAC,CAAC,CACH,yCAAK,CACL,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\n\nconst SddIcon = () => (\n\t<svg width=\"15px\" height=\"15px\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n\t\t<g>\n\t\t\t<path\n\t\t\t\td=\"M48,98.4c-0.5,0-1.1-0.1-1.5-0.4L17,83.6c-1.1-0.6-1.9-1.7-1.9-2.9c-0.1-1.2,0.5-2.4,1.5-3.1L71.2,41\n\t\t\t\tc1-0.7,2.4-0.8,3.5-0.2c1.1,0.6,1.9,1.7,1.9,2.9l2.2,32.8c0.1,1.2-0.5,2.4-1.5,3.1L50,97.9C49.4,98.2,48.7,98.4,48,98.4z M25.5,80\n\t\t\t\tl22.2,10.9l23.9-16l-1.6-24.7L25.5,80z\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M26.8,59.6c-0.5,0-1.1-0.1-1.5-0.4c-1.1-0.6-1.9-1.7-1.9-2.9l-2.2-32.8c-0.1-1.2,0.5-2.4,1.5-3.1L50,2.1\n\t\t\t\tc1-0.7,2.4-0.8,3.5-0.2L83,16.4c1.1,0.6,1.9,1.7,1.9,2.9s-0.5,2.4-1.5,3.1L28.8,59C28.2,59.4,27.5,59.6,26.8,59.6z M28.3,25.1\n\t\t\t\tl1.6,24.7L74.5,20L52.2,9.1L28.3,25.1z\"\n\t\t\t/>\n\t\t</g>\n\t</svg>\n);\n\n/**\n * A button that launches the Smart Desktop Designer.\n * If the SDD is not enabled, the button does not appear.\n */\nexport const SddButton: React.FunctionComponent = () => {\n\tconst [showSddButton, setShowSddButton] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tFSBL.System.getFEAInfo(({ sddEnabled }: { sddEnabled: boolean }) => {\n\t\t\tsetShowSddButton(sddEnabled);\n\t\t});\n\t}, []);\n\n\tconst clickEvent = () => {\n\t\tFSBL.Clients.LauncherClient.spawn(\"smartDesktopDesigner\", { addToWorkspace: false });\n\t};\n\n\treturn showSddButton ? (\n\t\t<span\n\t\t\ttitle=\"Smart Desktop Designer\"\n\t\t\tclassName=\"finsemble-toolbar-button left\"\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonClick={clickEvent}\n\t\t\tonKeyDown={(e: React.KeyboardEvent) => {\n\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\tclickEvent();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<SddIcon />\n\t\t</span>\n\t) : (\n\t\t<></>\n\t);\n};\n"]}

package/react/components/toolbar/ToolbarIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+/**
+ * Returns an image that will reload itself based on messages on the "Finsemble-ui-change.toolbarIconUpdate" topic. This
+ * is useful for dynamic theming. Otherwise this behaves just like an <img> tag.
+ */
+export declare const ToolbarIcon: React.FunctionComponent<any>;

package/react/components/toolbar/ToolbarIcon.js

@@ -0,0 +1,32 @@
+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 { useState, useEffect } from "react";
+/**
+ * Returns an image that will reload itself based on messages on the "Finsemble-ui-change.toolbarIconUpdate" topic. This
+ * is useful for dynamic theming. Otherwise this behaves just like an <img> tag.
+ */
+export const ToolbarIcon = (_a) => {
+    var { src, children, alt = "File menu" } = _a, other = __rest(_a, ["src", "children", "alt"]);
+    const [uniqueSrc, setSrc] = useState(src);
+    useEffect(() => {
+        const handler = () => {
+            setSrc(`${src}?${Date.now()}`);
+        };
+        FSBL.Clients.RouterClient.addListener("Finsemble-ui-change.toolbarIconUpdate", handler);
+        return () => {
+            FSBL.Clients.RouterClient.removeListener("Finsemble-ui-change.toolbarIconUpdate", handler);
+        };
+    }, [src]);
+    return (React.createElement("img", Object.assign({ src: uniqueSrc, alt: alt }, other), children));
+};
+//# sourceMappingURL=ToolbarIcon.js.map

package/react/components/toolbar/ToolbarIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarIcon.js","sourceRoot":"","sources":["../../../src/components/toolbar/ToolbarIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAiC,CAAC,EAA8C,EAAO,EAAE;QAAvD,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,GAAG,WAAW,OAAY,EAAP,KAAK,cAA5C,0BAA8C,CAAF;IACrG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,OAAO,GAAG,GAAG,EAAE;YACpB,MAAM,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,uCAAuC,EAAE,OAAO,CAAC,CAAC;QACxF,OAAO,GAAG,EAAE;YACX,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,CAAC,uCAAuC,EAAE,OAAO,CAAC,CAAC;QAC5F,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACN,2CAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAM,KAAK,GACtC,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\n\n/**\n * Returns an image that will reload itself based on messages on the \"Finsemble-ui-change.toolbarIconUpdate\" topic. This\n * is useful for dynamic theming. Otherwise this behaves just like an <img> tag.\n */\nexport const ToolbarIcon: React.FunctionComponent<any> = ({ src, children, alt = \"File menu\", ...other }): any => {\n\tconst [uniqueSrc, setSrc] = useState(src);\n\n\tuseEffect(() => {\n\t\tconst handler = () => {\n\t\t\tsetSrc(`${src}?${Date.now()}`);\n\t\t};\n\t\tFSBL.Clients.RouterClient.addListener(\"Finsemble-ui-change.toolbarIconUpdate\", handler);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"Finsemble-ui-change.toolbarIconUpdate\", handler);\n\t\t};\n\t}, [src]);\n\n\treturn (\n\t\t<img src={uniqueSrc} alt={alt} {...other}>\n\t\t\t{children}\n\t\t</img>\n\t);\n};\n"]}

package/react/components/toolbar/ToolbarSection.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+declare type props = {
+    hideBelowWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+/**
+ * A container element for defining sections in a toolbar.
+ * This component exists because css flex-box does provide "hideBelowWidth" functionality.
+ * @param {number} [hideBelowWidth] - Below this width the component will hide itself
+ * @param {string} [className] - The className for a customized look of the toolbar section
+ * @param {string} [style] - The CSS style for a customized look of the toolbar section
+ */
+export declare const ToolbarSection: ({ children, hideBelowWidth, className, style }: props) => JSX.Element;
+export {};

package/react/components/toolbar/ToolbarSection.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { ErrorBoundary } from "../common/ErrorBoundary";
+const { useState, useEffect, createRef } = React;
+/**
+ * A container element for defining sections in a toolbar.
+ * This component exists because css flex-box does provide "hideBelowWidth" functionality.
+ * @param {number} [hideBelowWidth] - Below this width the component will hide itself
+ * @param {string} [className] - The className for a customized look of the toolbar section
+ * @param {string} [style] - The CSS style for a customized look of the toolbar section
+ */
+export const ToolbarSection = ({ children, hideBelowWidth, className, style = {} }) => {
+    const [shouldRender, setShouldRender] = useState(true);
+    // We will use this to access the section element.
+    const wrapperRef = createRef();
+    /**
+     * This is called by ResizerObserver whenever the size of
+     * the section changes due to toolbar shrinkage.
+     */
+    const onResize = (entries) => {
+        if (entries.length) {
+            // Get the calculated width
+            const { offsetWidth } = entries[0].target;
+            // If the developer specified a minimum width (hideBelowWidth)
+            // and the section width is greater than the minimum
+            // we should render all children by setting shouldRender to true.
+            if (offsetWidth && hideBelowWidth) {
+                setShouldRender(offsetWidth > hideBelowWidth);
+            }
+        }
+    };
+    useEffect(() => {
+        if (wrapperRef.current) {
+            new ResizeObserver(onResize).observe(wrapperRef.current);
+        }
+        return () => { };
+    }, []);
+    return (React.createElement("div", { ref: wrapperRef, className: `finsemble-toolbar-section ${className}`, style: style },
+        React.createElement(ErrorBoundary, null, 
+        // Render children if shouldRender is true
+        shouldRender && children)));
+};
+//# sourceMappingURL=ToolbarSection.js.map

package/react/components/toolbar/ToolbarSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSection.js","sourceRoot":"","sources":["../../../src/components/toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;AAQjD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAS,EAAE,EAAE;IAC5F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvD,kDAAkD;IAClD,MAAM,UAAU,GAAG,SAAS,EAAkB,CAAC;IAC/C;;;OAGG;IACH,MAAM,QAAQ,GAAG,CAAC,OAA8B,EAAE,EAAE;QACnD,IAAI,OAAO,CAAC,MAAM,EAAE;YACnB,2BAA2B;YAC3B,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,MAAa,CAAC;YACjD,8DAA8D;YAC9D,oDAAoD;YACpD,iEAAiE;YACjE,IAAI,WAAW,IAAI,cAAc,EAAE;gBAClC,eAAe,CAAC,WAAW,GAAG,cAAc,CAAC,CAAC;aAC9C;SACD;IACF,CAAC,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,UAAU,CAAC,OAAO,EAAE;YACvB,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SACzD;QACD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,6BAA6B,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK;QACtF,oBAAC,aAAa;QAEZ,0CAA0C;QAC1C,YAAY,IAAI,QAAQ,CAEV,CACX,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { ErrorBoundary } from \"../common/ErrorBoundary\";\n\nconst { useState, useEffect, createRef } = React;\n\ntype props = {\n\thideBelowWidth?: number;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tchildren?: React.ReactNode;\n};\n/**\n * A container element for defining sections in a toolbar.\n * This component exists because css flex-box does provide \"hideBelowWidth\" functionality.\n * @param {number} [hideBelowWidth] - Below this width the component will hide itself\n * @param {string} [className] - The className for a customized look of the toolbar section\n * @param {string} [style] - The CSS style for a customized look of the toolbar section\n */\nexport const ToolbarSection = ({ children, hideBelowWidth, className, style = {} }: props) => {\n\tconst [shouldRender, setShouldRender] = useState(true);\n\t// We will use this to access the section element.\n\tconst wrapperRef = createRef<HTMLDivElement>();\n\t/**\n\t * This is called by ResizerObserver whenever the size of\n\t * the section changes due to toolbar shrinkage.\n\t */\n\tconst onResize = (entries: ResizeObserverEntry[]) => {\n\t\tif (entries.length) {\n\t\t\t// Get the calculated width\n\t\t\tconst { offsetWidth } = entries[0].target as any;\n\t\t\t// If the developer specified a minimum width (hideBelowWidth)\n\t\t\t// and the section width is greater than the minimum\n\t\t\t// we should render all children by setting shouldRender to true.\n\t\t\tif (offsetWidth && hideBelowWidth) {\n\t\t\t\tsetShouldRender(offsetWidth > hideBelowWidth);\n\t\t\t}\n\t\t}\n\t};\n\tuseEffect(() => {\n\t\tif (wrapperRef.current) {\n\t\t\tnew ResizeObserver(onResize).observe(wrapperRef.current);\n\t\t}\n\t\treturn () => {};\n\t}, []);\n\treturn (\n\t\t<div ref={wrapperRef} className={`finsemble-toolbar-section ${className}`} style={style}>\n\t\t\t<ErrorBoundary>\n\t\t\t\t{\n\t\t\t\t\t// Render children if shouldRender is true\n\t\t\t\t\tshouldRender && children\n\t\t\t\t}\n\t\t\t</ErrorBoundary>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/toolbar/ToolbarShell.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { HotkeyCombination } from "../../types/hotkeyTypes";
+import "../../assets/css/toolbar.css";
+declare type ToolbarShellProps = {
+    hotkeyShow?: HotkeyCombination;
+    hotkeyHide?: HotkeyCombination;
+};
+/**
+ * The ToolbarShell registers hotkeys, communicates with Finsemble core, sets up the toolbar size, and provides other functions of the Finsemble toolbar.
+ * @param hotkeyShow [array<string>] - A hotkey combination to show the toolbar
+ * @param hotkeyHide [array<string>] - A hotkey combination to hide the toolbar
+ */
+export declare const ToolbarShell: React.FunctionComponent<ToolbarShellProps>;
+export {};

package/react/components/toolbar/ToolbarShell.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useToolbar } from "../../hooks/useToolbar";
+import { useHotkey } from "../../hooks/useHotkey";
+import { SddButton } from "./SddButton";
+import "../../assets/css/toolbar.css";
+import FloatingFocus from "@q42/floating-focus-a11y";
+// The package FloatingFocus injects a focus indicator that moves around the page, but only for
+// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.
+new FloatingFocus();
+/**
+ * The ToolbarShell registers hotkeys, communicates with Finsemble core, sets up the toolbar size, and provides other functions of the Finsemble toolbar.
+ * @param hotkeyShow [array<string>] - A hotkey combination to show the toolbar
+ * @param hotkeyHide [array<string>] - A hotkey combination to hide the toolbar
+ */
+export const ToolbarShell = ({ hotkeyShow, hotkeyHide, children }) => {
+    const { hideToolbar, showToolbar } = useToolbar();
+    useHotkey(hotkeyShow, showToolbar);
+    useHotkey(hotkeyHide, hideToolbar);
+    return (React.createElement("div", { className: "finsemble-toolbar" },
+        children,
+        React.createElement(SddButton, null)));
+};
+//# sourceMappingURL=ToolbarShell.js.map