npm - @finsemble/finsemble-ui - Versions diffs - 10.0.0-beta.3 → 10.0.0-iocd.2 - Mend

@finsemble/finsemble-ui 10.0.0-beta.3 → 10.0.0-iocd.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2419) hide show

package/react/components/menu/MenuShell.js CHANGED Viewed

@@ -1,19 +1,46 @@
 import * as React from "react";
 import { MenuContext } from "./menuContext";
-import "../../ui-assets/css/menus.css";
+import "../../assets/css/menus.css";
 import { useMemo } from "react";
 import { MenuHotKey } from "./MenuHotKey";
 const MENU_WIDTH = 180;
-export const MenuShell = ({ children, id, width = MENU_WIDTH, height, className, maxHeight = Infinity, openHotkey, closeHotkey = ["escape"], }) => {
+/**
+ * The higher level menu component that manages the menu state, renders different parts of the menu, and facilitates
+ * communication between them.
+ *
+ * If window.FSBL.debug==true then windows won't automatically close on blur. This is useful for debugging events that occur in the windows.
+ *
+ * @param {string} [className] - Custom body class for the menu contents. These classes will be set on the `<body>` tag for the Menu's drop down window.
+ * @param {array} [closeHotkey] - An optional key-chord (e.g. ["ctrl","H"]) which will close the menu. Use this for instance when you want the same key-chord to toggle a menu open and closed. Note that the escape key will always close the menu.
+ * @param {number} [height] - Custom height for the menu. If not set then the height will be automatically calculated based on the content height and available monitor space.
+ * @param {string} [id] - Unique ID for the menu. Defaults to a random string.
+ * @param {number} [maxHeight=Infinity] - Maximum height of the menu.
+ * @param {number} [minHeight] - Minimum height of the menu
+ * @param {array} [openHotkey] - A hotkey combination to open the menu.
+ * @param {number} [width=180] - Custom width for the menu.
+ *
+ */
+export const MenuShell = ({ children, id, width = MENU_WIDTH, height, className, maxHeight = Infinity, minHeight = 0, openHotkey, closeHotkey, }) => {
+    /**
+     * Every menu has its own context which contains information that child components need to use.
+     * Here, we initialize that context. We do this with useMemo() for efficiency. Without useMemo,
+     * our context value *object* would be recreated with every render cycle, and would thus trigger
+     * every object that depended on context to re-render. Instead, useMenu creates a stable object
+     * that only updates when one of *its* dependencies updates. So in essence, so long as MenuShell's
+     * props are stable, context and all child props will also be stable.
+     *
+     * If id is passed in as a prop then we'll use that to initialize thisMenuId. Otherwise we'll set it to a random string.
+     */
     const contextValue = useMemo(() => {
         return {
             thisMenuId: id || `MENU_${((Math.random() * 0xffffff) << 0).toString(16)}`,
             className: className,
             maxHeight: maxHeight,
+            minHeight: minHeight,
             menuWidth: width,
             menuHeight: height,
         };
-    }, [id, className, maxHeight, width, height]);
+    }, [id, className, maxHeight, minHeight, width, height]);
     return (React.createElement(MenuContext.Provider, { value: contextValue },
         React.createElement(MenuHotKey, { open: openHotkey, close: closeHotkey }),
         children));

package/react/components/menu/MenuShell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuShell.js","sourceRoot":"","sources":["~~../../../~~src/components/menu/MenuShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO~~,+BAA+B~~,CAAC;~~AACvC~~,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,UAAU,GAAW,GAAG,CAAC;~~AA4B~~/B,MAAM,CAAC,MAAM,SAAS,~~GAAwC~~,CAAC,~~EAC9D~~,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,UAAU,EAClB,MAAM,EACN,SAAS,EACT,SAAS,GAAG,QAAQ,EACpB,~~UAAU~~,~~EACV,WAAW,~~GAAG,CAAC,~~QAAQ~~,~~CAAC~~,~~GACxB~~,EAAE,EAAE;~~IAWJ~~,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACN,UAAU,EAAE,EAAE,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YAC1E,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,MAAM;SAClB,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;~~IAE9C~~,OAAO,CACN,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QACxC,oBAAC,UAAU,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAI;QACnD,QAAQ,CACa,CACvB,CAAC;AACH,CAAC,CAAC"~~,"sourcesContent":["import * as React from \"react\";\r\nimport { MenuContext~~ } from \"./menuContext\";\r\nimport \"../../ui-assets/css/menus.css\";\r\nimport { useMemo } from \"react\";\r\nimport { MenuHotKey } from \"./MenuHotKey\";\r\n\r\nconst MENU_WIDTH: number = 180;\r\n\r\ntype ShellProps = {\r\n\tclassName?: string;\r\n\tcloseHotkey?: Array<string>;\r\n\theight?: number;\r\n\tid?: string;\r\n\tmaxHeight?: number;\r\n\topenHotkey?: Array<string>;\r\n\twidth?: number;\r\n};\r\n\r\n/*\r\n The higher level menu component that manages the menu state, renders different parts of the menu, and facilitates\r\n * communication between them.\r\n \r\n If window.FSBL.debug==true then windows won't automatically close on blur. This is useful for debugging events that occur in the windows.\r\n \r\n @param {string} [className] - Custom body class for the menu contents. These classes will be set on the <body> tag for the Menu's drop down window.\r\n * @param {array} [closeHotkey=[\"escape\"] ] - A hotkey combination to close the menu. Defaults to [\"escape\"].\r\n * @param {number} [height] - Custom height for the menu. If not set then the height will be automatically calculated based on the content height and available monitor space.\r\n * @param {string} [id] - Unique ID for the menu. Defaults to a random string.\r\n * @param {number} [maxHeight=Infinity] - Maximum height of the menu.\r\n * @param {array} [openHotkey] - A hotkey combination to open the menu.\r\n * @param {number} [width=180] - Custom width for the menu.\r\n \r\n /\r\n\r\nexport const MenuShell: React.FunctionComponent<ShellProps> = ({\r\n\tchildren,\r\n\tid,\r\n\twidth = MENU_WIDTH,\r\n\theight,\r\n\tclassName,\r\n\tmaxHeight = Infinity,\r\n\topenHotkey,\r\n\tcloseHotkey = [\"escape\"],\r\n}) => {\r\n\t/*\r\n\t Every menu has its own context which contains information that child components need to use.\r\n\t * Here, we initialize that context. We do this with useMemo() for efficiency. Without useMemo,\r\n\t * our context value object would be recreated with every render cycle, and would thus trigger\r\n\t * every object that depended on context to re-render. Instead, useMenu creates a stable object\r\n\t * that only updates when one of its dependencies updates. So in essence, so long as MenuShell's\r\n\t * props are stable, context and all child props will also be stable.\r\n\t \r\n\t If id is passed in as a prop then we'll use that to initialize thisMenuId. Otherwise we'll set it to a random string.\r\n\t /\r\n\tconst contextValue = useMemo(() => {\r\n\t\treturn {\r\n\t\t\tthisMenuId: id \|\| `MENU_${((Math.random() 0xffffff) << 0).toString(16)}`,\r\n\t\t\tclassName: className,\r\n\t\t\tmaxHeight: maxHeight,\r\n\t\t\tmenuWidth: width,\r\n\t\t\tmenuHeight: height,\r\n\t\t};\r\n\t}, [id, className, maxHeight, width, height]);\r\n\r\n\treturn (\r\n\t\t<MenuContext.Provider value={contextValue}>\r\n\t\t\t<MenuHotKey open={openHotkey} close={closeHotkey} />\r\n\t\t\t{children}\r\n\t\t</MenuContext.Provider>\r\n\t);\r\n};\r\n"]}
1	+ {"version":3,"file":"MenuShell.js","sourceRoot":"","sources":["../../../../../src/ui/components/menu/MenuShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,UAAU,GAAW,GAAG,CAAC;AAc/B;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACzB,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,UAAU,EAClB,MAAM,EACN,SAAS,EACT,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,CAAC,EACb,UAAU,EACV,WAAW,GACC,EAAE,EAAE;IAChB;;;;;;;;;OASG;IACH,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACN,UAAU,EAAE,EAAE,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YAC1E,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,MAAM;SAClB,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzD,OAAO,CACN,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QACxC,oBAAC,UAAU,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAI;QACnD,QAAQ,CACa,CACvB,CAAC;AACH,CAAC,CAAC"}

package/react/components/menu/MenuToggle.d.ts CHANGED Viewed

@@ -1,2 +1,8 @@
 import * as React from "react";
-export declare const MenuToggle: React.FunctionComponent;
+/**
+ * A menu button that opens and closes the menu.
+ */
+export declare const MenuToggle: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+//# sourceMappingURL=MenuToggle.d.ts.map

package/react/components/menu/MenuToggle.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MenuToggle.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/MenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,eAAO,MAAM,UAAU;cAA8B,MAAM,SAAS;iBAyBnE,CAAC"}

package/react/components/menu/MenuToggle.js CHANGED Viewed

@@ -1,12 +1,19 @@
 import * as React from "react";
 import { MenuContext } from "./menuContext";
 import { useMenu } from "../../hooks/useMenu";
+/**
+ * A menu button that opens and closes the menu.
+ */
 export const MenuToggle = ({ children }) => {
     const { toggleMenu, isMenuActive } = useMenu();
     const { thisMenuId } = React.useContext(MenuContext);
     const menuActiveClass = isMenuActive() ? "menu-active" : "";
-    return (React.createElement("div", { id: `${thisMenuId}-menu-toggle`, className: `finsemble-toolbar-button ${menuActiveClass}`, onMouseDown: toggleMenu },
+    return (React.createElement("div", { id: `${thisMenuId}-menu-toggle`, className: `finsemble-toolbar-button ${menuActiveClass}`, onMouseDown: toggleMenu, role: "button", tabIndex: 0, onKeyDown: (e) => {
+            if (["Enter", "Space"].includes(e.key)) {
+                toggleMenu();
+            }
+        }, "aria-expanded": "false", "aria-haspopup": "true" },
         children,
-        React.createElement("i", { className: "finsemble-toolbar-button-icon ff-chevron-down" })));
+        React.createElement("i", { className: "finsemble-toolbar-button-icon ff-chevron-down", "aria-hidden": "true" })));
 };
 //# sourceMappingURL=MenuToggle.js.map

package/react/components/menu/MenuToggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuToggle.js","sourceRoot":"","sources":["~~../../../~~src/components/menu/MenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;~~AAK9C~~,MAAM,CAAC,MAAM,UAAU,~~GAA4B~~,CAAC,EAAE,QAAQ,~~EAAE~~,EAAE,EAAE;~~IACnE~~,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAErD,MAAM,eAAe,GAAW,YAAY,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO,CACN,6BACC,EAAE,EAAE,GAAG,UAAU,cAAc,EAC/B,SAAS,EAAE,4BAA4B,eAAe,EAAE,EACxD,WAAW,EAAE,UAAU;~~QAEtB~~,QAAQ;QACT,2BAAG,SAAS,EAAC,+CAA+C,GAAK,~~CAC5D~~,CACN,CAAC;AACH,CAAC,CAAC"~~,"sourcesContent":["import * as React from \"react\";\r\nimport { MenuContext~~ } from \"./menuContext\";\r\nimport { useMenu } from \"../../hooks/useMenu\";\r\n\r\n/*\r\n A menu button that opens and closes the menu.\r\n */\r\nexport const MenuToggle: React.FunctionComponent = ({ children }) => {\r\n\tconst { toggleMenu, isMenuActive } = useMenu();\r\n\tconst { thisMenuId } = React.useContext(MenuContext);\r\n\r\n\tconst menuActiveClass: string = isMenuActive() ? \"menu-active\" : \"\";\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tid={`${thisMenuId}-menu-toggle`}\r\n\t\t\tclassName={`finsemble-toolbar-button ${menuActiveClass}`}\r\n\t\t\tonMouseDown={toggleMenu}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\t<i className=\"finsemble-toolbar-button-icon ff-chevron-down\"></i>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
1	+ {"version":3,"file":"MenuToggle.js","sourceRoot":"","sources":["../../../../../src/ui/components/menu/MenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IACzE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAErD,MAAM,eAAe,GAAW,YAAY,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO,CACN,6BACC,EAAE,EAAE,GAAG,UAAU,cAAc,EAC/B,SAAS,EAAE,4BAA4B,eAAe,EAAE,EACxD,WAAW,EAAE,UAAU,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAsC,EAAE,EAAE;YACrD,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBACvC,UAAU,EAAE,CAAC;aACb;QACF,CAAC,mBACa,OAAO,mBACP,MAAM;QAEnB,QAAQ;QACT,2BAAG,SAAS,EAAC,+CAA+C,iBAAa,MAAM,GAAK,CAC/E,CACN,CAAC;AACH,CAAC,CAAC"}

package/react/components/menu/index.d.ts CHANGED Viewed

@@ -3,3 +3,4 @@ export { MenuContent } from "./MenuContent";
 export { MenuItem } from "./MenuItem";
 export { MenuShell } from "./MenuShell";
 export { MenuToggle } from "./MenuToggle";
+//# sourceMappingURL=index.d.ts.map

package/react/components/menu/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/react/components/menu/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../~~src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"~~,"sourcesContent":["export { Menu~~ } from \"./Menu\";\r\nexport { MenuContent } from \"./MenuContent\";\r\nexport { MenuItem } from \"./MenuItem\";\r\nexport { MenuShell } from \"./MenuShell\";\r\nexport { MenuToggle } from \"./MenuToggle\";\r\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/react/components/menu/keyboardNavigation.d.ts CHANGED Viewed

@@ -1,17 +1,14 @@
-export declare class KeyboardNavigation {
-    private childWin;
-    private className;
-    private selectedItem;
-    constructor(childWin: Window, className: string);
-    private resetFocusOnDOMChanges;
-    private getElements;
-    private removeAllFocus;
-    private focusOn;
-    private clickOnItem;
-    private onArrowUp;
-    private onArrowDown;
-    private focusOnFirst;
-    private focusOnLast;
-    attach(): void;
-    detach(): void;
-}
+/**
+ * Keyboard navigation allows the end user to navigate through menus using
+ * arrow keys and to select items using the enter key.
+ *
+ * When an element is selected then the keyboard navigation state is reset
+ * so that the user will begin again with the first item.
+ *
+ * @param childWin - Main window or child window reference.
+ * @param [className] - Selector of elements to apply navigation on.
+ * @example
+ * applyMenuKeyboardNavigation(window, ".menu-item");
+ */
+export declare const applyMenuKeyboardNavigation: (childWin: Window, className?: string) => void;
+//# sourceMappingURL=keyboardNavigation.d.ts.map

package/react/components/menu/keyboardNavigation.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"keyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,2BAA2B,aAAc,MAAM,cAAa,MAAM,SAiN9E,CAAC"}

package/react/components/menu/keyboardNavigation.js CHANGED Viewed

@@ -1,108 +1,196 @@
-const { HotkeyClient } = FSBL.Clients;
-export class KeyboardNavigation {
-    constructor(childWin, className) {
-        this.selectedItem = undefined;
-        this.childWin = childWin;
-        this.className = className;
-        this.onArrowDown = this.onArrowDown.bind(this);
-        this.onArrowUp = this.onArrowUp.bind(this);
-        this.clickOnItem = this.clickOnItem.bind(this);
-        this.focusOnFirst = this.focusOnFirst.bind(this);
-        this.focusOnLast = this.focusOnLast.bind(this);
-        this.resetFocusOnDOMChanges();
-    }
-    resetFocusOnDOMChanges() {
-        new MutationObserver(() => {
-            this.selectedItem = undefined;
-        }).observe(this.childWin.document.body, {
-            childList: true,
-            characterData: false,
-            subtree: true,
-        });
-    }
-    getElements() {
-        return this.childWin.document.querySelectorAll(this.className);
-    }
-    removeAllFocus() {
-        const menuItems = this.getElements();
-        menuItems.forEach((item) => {
-            item.removeAttribute("focused");
-        });
-    }
-    focusOn(index) {
-        this.removeAllFocus();
-        const menuItems = this.getElements();
+/**
+ * Keyboard navigation allows the end user to navigate through menus using
+ * arrow keys and to select items using the enter key.
+ *
+ * When an element is selected then the keyboard navigation state is reset
+ * so that the user will begin again with the first item.
+ *
+ * @param childWin - Main window or child window reference.
+ * @param [className] - Selector of elements to apply navigation on.
+ * @example
+ * applyMenuKeyboardNavigation(window, ".menu-item");
+ */
+export const applyMenuKeyboardNavigation = (childWin, className = ".menu-item") => {
+    let selectedItem = 0;
+    let selectedIcon = -1;
+    new window.MutationObserver(() => {
+        // Reset selectedIndex when elements added or removed
+        // from the DOM. The motivation behind this was an issue
+        // with Brad's search menu where the order of focus is
+        // messed up when his list of result changes.
+        selectedItem = 0;
+    }).observe(childWin.document.body, {
+        childList: true,
+        characterData: false,
+        subtree: true,
+    });
+    /**
+     * Returns list of elements
+     */
+    const getElements = () => childWin.document.querySelectorAll(className);
+    const getMenuItemIcons = (index) => {
+        const menuItems = getElements();
+        return menuItems[index].querySelectorAll(".menu-item-icon");
+    };
+    /**
+     * Sets the focus on a menu item
+     * @param index The index of the menu item in the list
+     */
+    const focusOn = (index) => {
+        const menuItems = getElements();
+        // Menu could have no items
         if (!menuItems.length)
             return;
-        menuItems[index].setAttribute("focused", "true");
-        menuItems[index].scrollIntoViewIfNeeded({
-            behavior: "smooth",
-        });
-    }
-    clickOnItem() {
-        this.removeAllFocus();
-        if (this.selectedItem !== undefined) {
-            const elements = this.getElements();
-            ["mousedown", "click", "mouseup"].forEach((event) => {
-                const selectedItem = elements[this.selectedItem];
-                if (selectedItem && selectedItem.dispatchEvent) {
-                    selectedItem.dispatchEvent(new MouseEvent(event, {
-                        view: this.childWin,
+        // Focus on element and scroll if needed
+        menuItems[index].focus();
+    };
+    const focusOnFirst = () => {
+        selectedItem = 0;
+        selectedIcon = -1;
+        focusOn(0);
+    };
+    const focusOnLast = () => {
+        selectedIcon = -1;
+        const { length } = getElements();
+        if (length) {
+            selectedItem = length - 1;
+            focusOn(length - 1);
+        }
+    };
+    /**
+     * Sets the focus on a menu item's icon
+     * @param index The index of the menu item in the list
+     * @param iconIndex The index of the menu item's icon (-1 = menu text, not icon)
+     */
+    const focusOnIcon = (index, iconIndex) => {
+        const menuItems = getElements();
+        // Menu could have no items
+        if (!menuItems.length)
+            return;
+        const icons = getMenuItemIcons(index);
+        // Defend against possible js runtime error
+        if (icons.length <= iconIndex) {
+            return;
+        }
+        // Focus on menu item text, if relevant
+        if (iconIndex === -1) {
+            menuItems[index].focus();
+            return;
+        }
+        icons[iconIndex].focus();
+    };
+    /**
+     * Simulates mouse events
+     */
+    const clickOnItem = () => {
+        const elements = getElements();
+        const selectedItemElement = elements[selectedItem];
+        ["mousedown", "click", "mouseup"].forEach((event) => {
+            if (selectedIcon > -1) {
+                const icons = getMenuItemIcons(selectedItem);
+                const selectedIconElement = icons[selectedIcon];
+                if (selectedIconElement) {
+                    selectedIconElement.dispatchEvent(new MouseEvent(event, {
+                        view: childWin,
                         bubbles: true,
                         cancelable: true,
                         buttons: 1,
                     }));
+                    return;
                 }
-            });
-            this.selectedItem = undefined;
+            }
+            if (selectedItemElement && selectedItemElement.dispatchEvent) {
+                selectedItemElement.dispatchEvent(new MouseEvent(event, {
+                    view: childWin,
+                    bubbles: true,
+                    cancelable: true,
+                    buttons: 1,
+                }));
+            }
+        });
+    };
+    /**
+     * Invoked when a user presses on the arrow up key
+     */
+    const onArrowUp = () => {
+        selectedIcon = -1;
+        // Set the focus on the previous item
+        selectedItem--;
+        if (selectedItem < 0) {
+            // If we are back to the begining
+            // set the focus on last item
+            focusOnLast();
+            return;
+        }
+        focusOn(selectedItem);
+    };
+    /**
+     * Invoked when user press the arrow down key
+     */
+    const onArrowDown = () => {
+        selectedIcon = -1;
+        // The the focus on the next item
+        selectedItem++;
+        // If we reached the end, then go back to first item
+        if (selectedItem === getElements().length) {
+            selectedItem = 0;
         }
-    }
-    onArrowUp() {
-        if (this.selectedItem === undefined) {
-            this.selectedItem = 0;
-            return this.focusOn(0);
+        focusOn(selectedItem);
+    };
+    /**
+     * Invoked when user press the arrow right key
+     */
+    const onArrowRight = () => {
+        const menuItems = getElements();
+        // Menu could have no items
+        if (!menuItems.length)
+            return;
+        const icons = getMenuItemIcons(selectedItem);
+        if (icons.length === 0) {
+            return;
         }
-        this.selectedItem--;
-        if (this.selectedItem < 0) {
-            this.selectedItem = this.getElements().length - 1;
+        selectedIcon++;
+        if (selectedIcon === icons.length) {
+            selectedIcon = -1;
         }
-        this.focusOn(this.selectedItem);
-    }
-    onArrowDown() {
-        if (this.selectedItem === undefined) {
-            this.selectedItem = 0;
-            return this.focusOn(0);
+        focusOnIcon(selectedItem, selectedIcon);
+    };
+    /**
+     * Invoked when user press the arrow left key
+     */
+    const onArrowLeft = () => {
+        const menuItems = getElements();
+        // Menu could have no items
+        if (!menuItems.length)
+            return;
+        const icons = getMenuItemIcons(selectedItem);
+        if (icons.length === 0) {
+            return;
         }
-        this.selectedItem++;
-        if (this.selectedItem === this.getElements().length) {
-            this.selectedItem = 0;
+        selectedIcon--;
+        if (selectedIcon === icons.length) {
+            selectedIcon = -1;
         }
-        this.focusOn(this.selectedItem);
-    }
-    focusOnFirst() {
-        this.selectedItem = 0;
-        this.focusOn(0);
-    }
-    focusOnLast() {
-        const { length } = this.getElements();
-        if (length) {
-            this.selectedItem = length - 1;
-            this.focusOn(length - 1);
+        focusOnIcon(selectedItem, selectedIcon);
+    };
+    const actionDictionary = {
+        ArrowDown: onArrowDown,
+        ArrowUp: onArrowUp,
+        ArrowLeft: onArrowLeft,
+        ArrowRight: onArrowRight,
+        Enter: clickOnItem,
+        Home: focusOnFirst,
+        End: focusOnLast,
+    };
+    childWin.addEventListener("keydown", (e) => {
+        var _a;
+        const { key } = e;
+        if (key in actionDictionary) {
+            (_a = actionDictionary[key]) === null || _a === void 0 ? void 0 : _a.call(actionDictionary);
+            e.preventDefault();
         }
-    }
-    attach() {
-        HotkeyClient.addGlobalHotkey(["up arrow"], this.onArrowUp);
-        HotkeyClient.addGlobalHotkey(["down arrow"], this.onArrowDown);
-        HotkeyClient.addGlobalHotkey(["return"], this.clickOnItem);
-        HotkeyClient.addGlobalHotkey(["home"], this.focusOnFirst);
-        HotkeyClient.addGlobalHotkey(["end"], this.focusOnLast);
-    }
-    detach() {
-        HotkeyClient.removeGlobalHotkey(["up arrow"], this.onArrowUp);
-        HotkeyClient.removeGlobalHotkey(["down arrow"], this.onArrowDown);
-        HotkeyClient.removeGlobalHotkey(["return"], this.clickOnItem);
-        HotkeyClient.removeGlobalHotkey(["home"], this.focusOnFirst);
-        HotkeyClient.removeGlobalHotkey(["end"], this.focusOnLast);
-    }
-}
+    });
+    childWin.addEventListener("blur", focusOnFirst);
+    childWin.addEventListener("focus", focusOnFirst);
+};
 //# sourceMappingURL=keyboardNavigation.js.map

package/react/components/menu/keyboardNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["const { HotkeyClient }: any = FSBL.Clients;\r\n/*\r\n Keyboard navigation allows the end user to navigate through menus using\r\n * cursor keys and to select items using the enter key.\r\n \r\n This is stateful. As implemented in MenuPortal, the currently selected\r\n * menu item will remain selected between menu opens and closes.\r\n \r\n When an element is selected then the keyboard navigation state is reset\r\n * so that the user will begin again with the first item.\r\n \r\n @param childWin Main window or child window reference.\r\n * @param className Selector of elements to apply navigation on.\r\n * @example\r\n * const keyboardNav = KeyboardNavigation(window, \".menu-item\");\r\n * keyboardNav.attach() // enable navigation\r\n * keyboardNav.detach() // disable navigation\r\n /\r\nexport class KeyboardNavigation {\r\n\tprivate childWin: Window;\r\n\r\n\tprivate className: string;\r\n\r\n\tprivate selectedItem: number \| undefined = undefined;\r\n\r\n\t/\r\n\t \r\n\t * @param childWin Main window or child window reference\r\n\t * @param className The selector string e.g .menu-item\r\n\t /\r\n\tconstructor(childWin: Window, className: string) {\r\n\t\tthis.childWin = childWin;\r\n\t\tthis.className = className;\r\n\t\tthis.onArrowDown = this.onArrowDown.bind(this);\r\n\t\tthis.onArrowUp = this.onArrowUp.bind(this);\r\n\t\tthis.clickOnItem = this.clickOnItem.bind(this);\r\n\t\tthis.focusOnFirst = this.focusOnFirst.bind(this);\r\n\t\tthis.focusOnLast = this.focusOnLast.bind(this);\r\n\t\tthis.resetFocusOnDOMChanges();\r\n\t}\r\n\r\n\t/\r\n\t A mutation observer to watch changes in the DOM\r\n\t * and set the selectedIndex to undefined when changes\r\n\t * observed. We want to start focusing from element with index 0\r\n\t * when the elements order changes.\r\n\t /\r\n\tprivate resetFocusOnDOMChanges() {\r\n\t\tnew MutationObserver(() => {\r\n\t\t\t// Reset selectedIndex when elements added or removed\r\n\t\t\t// from the DOM. The motivation behind this was an issue\r\n\t\t\t// with Brad's search menu where the order of focus is\r\n\t\t\t// messed up when his list of result changes.\r\n\t\t\tthis.selectedItem = undefined;\r\n\t\t}).observe(this.childWin.document.body, {\r\n\t\t\tchildList: true,\r\n\t\t\tcharacterData: false,\r\n\t\t\tsubtree: true,\r\n\t\t});\r\n\t}\r\n\r\n\t/\r\n\t Returns list of elements\r\n\t /\r\n\tprivate getElements() {\r\n\t\treturn this.childWin.document.querySelectorAll(this.className);\r\n\t}\r\n\r\n\t/\r\n\t Remove all focus classes.\r\n\t /\r\n\tprivate removeAllFocus() {\r\n\t\tconst menuItems = this.getElements();\r\n\t\tmenuItems.forEach((item: Element) => {\r\n\t\t\titem.removeAttribute(\"focused\");\r\n\t\t});\r\n\t}\r\n\r\n\t/\r\n\t Sets the focus on a menu item\r\n\t * @param index The index of the menu item in the list\r\n\t /\r\n\tprivate focusOn(index: number) {\r\n\t\tthis.removeAllFocus();\r\n\r\n\t\tconst menuItems = this.getElements();\r\n\t\t// Menu could have no items\r\n\t\tif (!menuItems.length) return;\r\n\t\t// Focus on element and scroll if needed\r\n\t\tmenuItems[index].setAttribute(\"focused\", \"true\");\r\n\t\t(menuItems[index] as any).scrollIntoViewIfNeeded({\r\n\t\t\tbehavior: \"smooth\",\r\n\t\t});\r\n\t}\r\n\r\n\t/\r\n\t Simulates mouse events\r\n\t /\r\n\tprivate clickOnItem() {\r\n\t\tthis.removeAllFocus();\r\n\t\tif (this.selectedItem !== undefined) {\r\n\t\t\tconst elements = this.getElements();\r\n\t\t\t[\"mousedown\", \"click\", \"mouseup\"].forEach((event) => {\r\n\t\t\t\tconst selectedItem = elements[this.selectedItem as any];\r\n\t\t\t\tif (selectedItem && selectedItem.dispatchEvent) {\r\n\t\t\t\t\tselectedItem.dispatchEvent(\r\n\t\t\t\t\t\tnew MouseEvent(event, {\r\n\t\t\t\t\t\t\tview: this.childWin,\r\n\t\t\t\t\t\t\tbubbles: true,\r\n\t\t\t\t\t\t\tcancelable: true,\r\n\t\t\t\t\t\t\tbuttons: 1,\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t/\r\n\t\t\t When an element is selected we reset the menu to focus on the first item.\r\n\t\t\t * Per Dan Nicolai UX specialist.\r\n\t\t\t /\r\n\t\t\tthis.selectedItem = undefined;\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Invoked when a user presses on the arrow up key\r\n\t /\r\n\tprivate onArrowUp() {\r\n\t\t// On first key up/down press, we want\r\n\t\t// the focus to be on first item\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\t\t// Set the focus on the previous item\r\n\t\tthis.selectedItem--;\r\n\t\tif (this.selectedItem < 0) {\r\n\t\t\t// If we are back to the begining\r\n\t\t\t// set the focus on last item\r\n\t\t\tthis.selectedItem = this.getElements().length - 1;\r\n\t\t}\r\n\t\tthis.focusOn(this.selectedItem);\r\n\t}\r\n\r\n\t/\r\n\t Invoked when user press the arrow down key\r\n\t /\r\n\tprivate onArrowDown() {\r\n\t\tif (this.selectedItem === undefined) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t\treturn this.focusOn(0);\r\n\t\t}\r\n\t\t// The the focus on the next item\r\n\t\tthis.selectedItem++;\r\n\t\t// If we reached the end, then go back to first item\r\n\t\tif (this.selectedItem === this.getElements().length) {\r\n\t\t\tthis.selectedItem = 0;\r\n\t\t}\r\n\t\tthis.focusOn(this.selectedItem);\r\n\t}\r\n\r\n\tprivate focusOnFirst() {\r\n\t\tthis.selectedItem = 0;\r\n\t\tthis.focusOn(0);\r\n\t}\r\n\r\n\tprivate focusOnLast() {\r\n\t\tconst { length } = this.getElements();\r\n\t\tif (length) {\r\n\t\t\tthis.selectedItem = length - 1;\r\n\t\t\tthis.focusOn(length - 1);\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Adds global hot keys for up/down arrow\r\n\t /\r\n\tpublic attach() {\r\n\t\t// Register hotkeys\r\n\t\tHotkeyClient.addGlobalHotkey([\"up arrow\"], this.onArrowUp);\r\n\t\tHotkeyClient.addGlobalHotkey([\"down arrow\"], this.onArrowDown);\r\n\t\tHotkeyClient.addGlobalHotkey([\"return\"], this.clickOnItem);\r\n\t\tHotkeyClient.addGlobalHotkey([\"home\"], this.focusOnFirst);\r\n\t\tHotkeyClient.addGlobalHotkey([\"end\"], this.focusOnLast);\r\n\t}\r\n\r\n\t/\r\n\t Remove global got keys for up/down arrow\r\n\t */\r\n\tpublic detach() {\r\n\t\t// Remove registered hotkeys\r\n\t\tHotkeyClient.removeGlobalHotkey([\"up arrow\"], this.onArrowUp);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"down arrow\"], this.onArrowDown);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"return\"], this.clickOnItem);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"home\"], this.focusOnFirst);\r\n\t\tHotkeyClient.removeGlobalHotkey([\"end\"], this.focusOnLast);\r\n\t}\r\n}\r\n"]}
1	+ {"version":3,"file":"keyboardNavigation.js","sourceRoot":"","sources":["../../../../../src/ui/components/menu/keyboardNavigation.ts"],"names":[],"mappings":"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"}

package/react/components/menu/menuContext.d.ts CHANGED Viewed

@@ -5,6 +5,14 @@ declare type MenuContextType = {
     maxHeight: number;
     menuWidth: number;
     menuHeight: number | undefined;
+    minHeight: number;
 };
+/**
+ * We initialize our context with an empty object because we know that MenuShell will
+ * properly initialize our context at runtime (during the first render). We cast () to MenuContextType
+ * to avoid typescript errors for any consumers of the context object. Beware that if you get a runtime error
+ * then someone has probably missed an initialization in MenuShell.
+ */
 export declare const MenuContext: import("react").Context<MenuContextType>;
 export {};
+//# sourceMappingURL=menuContext.d.ts.map

package/react/components/menu/menuContext.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"menuContext.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/menuContext.ts"],"names":[],"mappings":";AAEA,aAAK,eAAe,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,0CAAwD,CAAC"}

package/react/components/menu/menuContext.js CHANGED Viewed

@@ -1,3 +1,9 @@
 import { createContext } from "react";
+/**
+ * We initialize our context with an empty object because we know that MenuShell will
+ * properly initialize our context at runtime (during the first render). We cast () to MenuContextType
+ * to avoid typescript errors for any consumers of the context object. Beware that if you get a runtime error
+ * then someone has probably missed an initialization in MenuShell.
+ */
 export const MenuContext = createContext({});
 //# sourceMappingURL=menuContext.js.map

package/react/components/menu/menuContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menuContext.js","sourceRoot":"","sources":["~~../../../~~src/components/menu/menuContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;~~AAgBtC~~,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAkB,EAAqB,CAAC,CAAC"~~,"sourcesContent":["import { createContext~~ } from \"react\";\r\n\r\ntype MenuContextType = {\r\n\tthisMenuId: string;\r\n\tclassName: string \| undefined;\r\n\tmaxHeight: number;\r\n\tmenuWidth: number;\r\n\tmenuHeight: number \| undefined;\r\n};\r\n\r\n/*\r\n We initialize our context with an empty object because we know that MenuShell will\r\n * properly initialize our context at runtime (during the first render). We cast () to MenuContextType\r\n * to avoid typescript errors for any consumers of the context object. Beware that if you get a runtime error\r\n * then someone has probably missed an initialization in MenuShell.\r\n */\r\nexport const MenuContext = createContext<MenuContextType>({} as MenuContextType);\r\n"]}
1	+ {"version":3,"file":"menuContext.js","sourceRoot":"","sources":["../../../../../src/ui/components/menu/menuContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAkB,EAAqB,CAAC,CAAC"}

package/react/components/menu/menuHelpers.d.ts CHANGED Viewed

@@ -1,10 +1,33 @@
-export declare const calculatePosition: (menuId: string, menuContentHeight?: number | undefined) => Promise<{
+/**
+ * Returns a drop down menu's position relative to the toolbar's current location and the
+ * MenuToggle that was pressed. The dimensions returned are relative to the toolbar's
+ * current monitor.
+ * @param menuId The shell ID (e.g. filemenu)
+ * @param menuContentHeight The height of menu contents.
+ */
+export declare const calculatePosition: (menuId: string, menuContentHeight?: number) => Promise<{
     top: number;
     left: number;
 }>;
-export declare const calculateDimensions: (childWindow: Window, menuId: string, fixedHeight?: number, maxHeight?: number) => Promise<{
+/**
+ * Calculates the height and position that a window should take based on the height necessary to display
+ * the window's DOM contents without scrollbars, but not beyond the scope of the monitor itself.
+ *
+ * @param childWindow Window The window to calculate
+ * @param menuId string The id of the menu, used for a CSS selector
+ * @param [maxHeight] Maximum height for the window
+ * @param [fixedHeight] Optional fixed height
+ */
+export declare const calculateDimensions: (childWindow: Window, menuId: string, fixedHeight: number | undefined, maxHeight: number | undefined, minHeight: number) => Promise<{
     top: number;
     left: number;
     height: number;
 }>;
+/**
+ * Copy CSS elements from parent to child window. Portals operate in a new window which doesn't automatically
+ * have access to the CSS from the main window, so we need to clone those elements into the menu's window
+ * when it is created.
+ * @param childWindow Child window reference
+ */
 export declare const injectCSS: (childWindow: Window) => void;
+//# sourceMappingURL=menuHelpers.d.ts.map

package/react/components/menu/menuHelpers.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"menuHelpers.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/menuHelpers.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,WACrB,MAAM,sBACM,MAAM;SAErB,MAAM;UACL,MAAM;EAqDZ,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,gBAClB,MAAM,UACX,MAAM,6EAGH,MAAM;SAEZ,MAAM;UACL,MAAM;YACJ,MAAM;EA4Bd,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gBAAiB,MAAM,KAAG,IAgB/C,CAAC"}