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

@finsemble/finsemble-ui 10.0.0-iocd.9 → 10.0.3-beta.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 (1537) hide show

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

@@ -1,32 +1,32 @@
-import * as React from "react";
-import "../../assets/css/menus.css";
-declare type ShellProps = {
-    className?: string;
-    closeHotkey?: Array<string>;
-    height?: number;
-    id?: string;
-    maxHeight?: number;
-    minHeight?: number;
-    openHotkey?: Array<string>;
-    width?: number;
-    children?: React.ReactNode;
-};
-/**
- * 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 declare const MenuShell: ({ children, id, width, height, className, maxHeight, minHeight, openHotkey, closeHotkey, }: ShellProps) => JSX.Element;
-export {};
+import * as React from "react";
+import "../../assets/css/menus.css";
+type ShellProps = {
+    className?: string;
+    closeHotkey?: Array<string>;
+    height?: number;
+    id?: string;
+    maxHeight?: number;
+    minHeight?: number;
+    openHotkey?: Array<string>;
+    width?: number;
+    children?: React.ReactNode;
+};
+/**
+ * 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 declare const MenuShell: ({ children, id, width, height, className, maxHeight, minHeight, openHotkey, closeHotkey, }: ShellProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=MenuShell.d.ts.map

package/react/components/menu/MenuShell.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuShell.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/MenuShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,4BAA4B,CAAC;AAMpC,~~aAAK~~,UAAU,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,SAAS,+FAUnB,UAAU,~~gBA4BZ~~,CAAC"}
1	+ {"version":3,"file":"MenuShell.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/menu/MenuShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,4BAA4B,CAAC;AAMpC,KAAK,UAAU,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,SAAS,+FAUnB,UAAU,sBA4BZ,CAAC"}

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

@@ -1,48 +1,48 @@
-import * as React from "react";
-import { MenuContext } from "./menuContext";
-import "../../assets/css/menus.css";
-import { useMemo } from "react";
-import { MenuHotKey } from "./MenuHotKey";
-const MENU_WIDTH = 180;
-/**
- * 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, minHeight, width, height]);
-    return (React.createElement(MenuContext.Provider, { value: contextValue },
-        React.createElement(MenuHotKey, { open: openHotkey, close: closeHotkey }),
-        children));
-};
+import * as React from "react";
+import { MenuContext } from "./menuContext";
+import "../../assets/css/menus.css";
+import { useMemo } from "react";
+import { MenuHotKey } from "./MenuHotKey";
+const MENU_WIDTH = 180;
+/**
+ * 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, minHeight, width, height]);
+    return (React.createElement(MenuContext.Provider, { value: contextValue },
+        React.createElement(MenuHotKey, { open: openHotkey, close: closeHotkey }),
+        children));
+};
 //# sourceMappingURL=MenuShell.js.map

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

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

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

	@@ -1 +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"}
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,iBAAkB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBA6BrE,CAAC"}

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

@@ -1,19 +1,20 @@
-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, 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", "aria-hidden": "true" })));
-};
+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" : "";
+    const title = typeof children === "string" ? children : undefined;
+    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" },
+        React.createElement("div", { id: `${thisMenuId}-menu-toggle-button`, title: title }, children),
+        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/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"}
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,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElE,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,CAAC;gBACxC,UAAU,EAAE,CAAC;YACd,CAAC;QACF,CAAC,mBACa,OAAO,mBACP,MAAM;QAEpB,6BAAK,EAAE,EAAE,GAAG,UAAU,qBAAqB,EAAE,KAAK,EAAE,KAAK,IACvD,QAAQ,CACJ;QACN,2BAAG,SAAS,EAAC,+CAA+C,iBAAa,MAAM,GAAK,CAC/E,CACN,CAAC;AACH,CAAC,CAAC"}

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

@@ -1,6 +1,6 @@
-export { Menu } from "./Menu";
-export { MenuContent } from "./MenuContent";
-export { MenuItem } from "./MenuItem";
-export { MenuShell } from "./MenuShell";
-export { MenuToggle } from "./MenuToggle";
+export { Menu } from "./Menu";
+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.js CHANGED Viewed

@@ -1,6 +1,6 @@
-export { Menu } from "./Menu";
-export { MenuContent } from "./MenuContent";
-export { MenuItem } from "./MenuItem";
-export { MenuShell } from "./MenuShell";
-export { MenuToggle } from "./MenuToggle";
+export { Menu } from "./Menu";
+export { MenuContent } from "./MenuContent";
+export { MenuItem } from "./MenuItem";
+export { MenuShell } from "./MenuShell";
+export { MenuToggle } from "./MenuToggle";
 //# sourceMappingURL=index.js.map

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

@@ -1,14 +1,14 @@
-/**
- * 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;
+/**
+ * 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 CHANGED Viewed

	@@ -1 +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"}
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,SAmN9E,CAAC"}