@openfin/ui-library 0.24.0 → 0.25.0-alpha.1716474081

package/dist/components/controls/CustomContextMenu/CustomContextMenu.d.ts

@@ -0,0 +1,79 @@
+import { FC, ReactNode } from 'react';
+export declare const CONTEXT_MENU_FRAME_ID = "context_menu_frame", ACTIVE_CONTEXT_MENU_CLASS = "active_context_menu", BASE_CONTEXT_MENU = "base_context_menu", PRIOR_CONTEXT_MENU_CLASS = "previous_context_menu", CONTEXT_MENU_ANIMATION_DURATION = 200;
+export type CustomContextMenuData = {
+    type: string;
+    option?: string;
+};
+export type CustomContextMenuTemplate = {
+    /**
+     * Can be `normal`, `separator`, `submenu`, or `checkbox`.
+     * Defaults to 'normal' unless a 'submenu' key exists
+     */
+    type?: 'normal' | 'separator' | 'submenu' | 'checkbox';
+    /**
+     * The text to show on the menu item.
+     * Must be unique within context menu.
+     * Should be left undefined for type: 'separator'
+     */
+    label?: string;
+    /**
+     * If false, the menu item will be greyed out and unclickable.
+     */
+    enabled?: boolean;
+    /**
+     * If false, the menu item will be entirely hidden.
+     */
+    visible?: boolean;
+    /**
+     * Should only be specified for `checkbox` type menu items.
+     */
+    checked?: boolean;
+    /**
+     * Should be specified for `submenu` type menu items. If `submenu` is specified,
+     * the `type: 'submenu'` can be omitted.
+     */
+    submenu?: CustomContextMenuTemplate[];
+    /**
+     * Data to be returned if the user selects the element. Must be serializable
+     */
+    data?: CustomContextMenuData;
+    /**
+     * Image Data URI with image dimensions inferred from the encoded string
+     */
+    icon?: string;
+};
+export type CustomContextMenuProps = {
+    /**
+     * The menu template to render.
+     */
+    menuTemplate: CustomContextMenuTemplate[];
+    /**
+     * Callback for when a menu item is clicked.
+     */
+    onClick: (data: CustomContextMenuData) => void;
+    /**
+     * Optional Icon to be displayed in root menu header
+     */
+    icon?: ReactNode;
+    /**
+     * Optional callback used for when the menu is resized. This is used for custom animations when the menu is resized.
+     */
+    onMenuResize?: (height: number, width: number) => void;
+    /**
+     * Optional callback used for when the context menu is opened. This is used for custom animations when the menu is opened.
+     */
+    onContextMenuReady?: () => void;
+    /**
+     * Optional boolean used to determine whether to apply border radius. When true, no border radius is applied.
+     * When false, a border radius of 10px is applied to match the rounded corners on MacOS windows. Defaults to true.
+     */
+    isWindows?: boolean;
+};
+export type SubmenulessMenuItemTemplate = Omit<CustomContextMenuTemplate, 'submenu'> & {
+    hasSubMenu: boolean;
+};
+export interface SubMenuNavigationTemplate {
+    parentLabel: string;
+    menuTemplate: SubmenulessMenuItemTemplate[];
+}
+export declare const CustomContextMenu: FC<CustomContextMenuProps>;

package/dist/components/controls/CustomContextMenu/MenuItems/CustomContextMenuItem.d.ts

@@ -0,0 +1,14 @@
+export type CustomContextMenuItemData = {
+    icon?: string;
+    label?: string;
+    type?: 'normal' | 'separator' | 'submenuHeader' | 'submenu' | 'checkbox';
+    enabled?: boolean;
+    checked?: boolean;
+    submenu?: boolean;
+    showShouldHomeButton?: boolean;
+    onClick?: () => void;
+    onClose?: () => void;
+    onBack?: () => void;
+    selected?: boolean;
+};
+export declare const CustomContextMenuItem: ({ type, icon, label, enabled, checked, submenu, showShouldHomeButton, onClick, onClose, onBack, selected, }: CustomContextMenuItemData) => JSX.Element;

package/dist/components/controls/CustomContextMenu/MenuItems/NormalCustomContextMenuItem.d.ts

@@ -0,0 +1,11 @@
+export type NormalCustomContextMenuItemProps = {
+    type?: 'checkbox' | 'normal';
+    label?: string;
+    icon?: string;
+    enabled?: boolean;
+    checked?: boolean;
+    submenu?: boolean;
+    onClick?: () => void;
+    selected?: boolean;
+};
+export declare const NormalCustomContextMenuItem: ({ type, label, enabled, checked, submenu, onClick, selected, }: NormalCustomContextMenuItemProps) => JSX.Element;

package/dist/components/controls/CustomContextMenu/MenuItems/RootMenuHeader.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type RootMenuHeaderProps = {
+    icon: ReactNode;
+};
+export declare const RootMenuHeader: ({ icon }: RootMenuHeaderProps) => JSX.Element;

package/dist/components/controls/CustomContextMenu/MenuItems/SeparatorCustomContextMenuItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SeparatorCustomContextMenuItem: React.FC;

package/dist/components/controls/CustomContextMenu/MenuItems/SubmenuHeaderCustomContextMenuItem.d.ts

@@ -0,0 +1,8 @@
+export type SubmenuHeaderCustomContextMenuItemProps = {
+    label?: string;
+    showShouldHomeButton?: boolean;
+    onClose?: () => void;
+    onBack?: () => void;
+    selected?: boolean;
+};
+export declare const SubmenuHeaderCustomContextMenuItem: ({ label, showShouldHomeButton, onClose, onBack, selected, }: SubmenuHeaderCustomContextMenuItemProps) => JSX.Element;

package/dist/components/controls/CustomContextMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './CustomContextMenu';

package/dist/components/controls/CustomContextMenu/useContextMenuKeyboardNavigation.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CustomContextMenuData, SubmenulessMenuItemTemplate } from './CustomContextMenu';
+/**
+ * Custom hook to handle keyboard navigation for a context menu. Provides handlers for various keyboard events and sets up/tears down event listeners.
+ *
+ * @param { SubmenulessMenuItemTemplate[] } menuOptions - Array of menu items without submenus.
+ * @param { string[] } menuLabelStack - Stack of menu labels representing the current path in the context menu.
+ * @param { string } activeMenuLabel - Label of the currently active menu.
+ * @param { number } selectedIndex - Index of the currently selected menu item.
+ * @param { React.Dispatch<React.SetStateAction<number>> } setSelectedIndex - setState function to update the selected index.
+ * @param { (data: CustomContextMenuData) => void } onClick - Callback function to handle click events on menu items.
+ * @param { (submenuLabel: string) => void } handleNavigateToSubmenu - Function to navigate to a submenu.
+ * @param { (submenuLabel: string) => void } handleBackToParentMenu - Function to navigate back to the parent menu.
+ * @param { () => void } handleNavigateToBase - Function to navigate back to the base menu.
+ * @returns { void }
+ */
+export declare const useContextMenuKeyboardNavigation: (menuOptions: SubmenulessMenuItemTemplate[], menuLabelStack: string[], activeMenuLabel: string, selectedIndex: number, setSelectedIndex: React.Dispatch<React.SetStateAction<number>>, onClick: (data: CustomContextMenuData) => void, handleNavigateToSubmenu: (submenuLabel: string) => void, handleBackToParentMenu: (submenuLabel: string) => void, handleNavigateToBase: () => void) => void;

package/dist/components/controls/CustomContextMenu/useContextMenuKeyboardNavigation.test.d.ts

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

package/dist/components/controls/CustomContextMenu/useContextMenuNavigation.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SubMenuNavigationTemplate } from './CustomContextMenu';
+/**
+ * Custom hook to handle context menu navigation. Return 3 handler functions.
+ *
+ * @param { number } transitionSpeed - speed of context menu transition when navigating between submenus.
+ * @param { React.Dispatch<React.SetStateAction<number>> } setTransitionSpeed - setState function to update the transition speed.
+ * @param { string[] } menuLabelStack - stack of menu labels representing the current path in the context menu.
+ * @param { React.Dispatch<React.SetStateAction<string[]>> } setMenuLabelStack - setState function to update the menu label stack.
+ * @param { string | undefined } activeMenuLabel - label of the currently active menu.
+ * @param { React.Dispatch<React.SetStateAction<string | undefined>> } setActiveMenuLabel - setState function to update the active menu label.
+ * @param { React.Dispatch<React.SetStateAction<number>> } setSelectedIndex - setState function to update the selected index.
+ * @param { SubMenuNavigationTemplate[] } menuCollection - array of all menus.
+ * @param @optional { (height: number, width: number) => void } onMenuResize - function to handle menu resize behavior.
+ * @returns { { handleNavigateToSubmenu: (parentLabel: string) => void, handleNavigateBackToParent: () => Promise<void>, handleNavigateToBase: () => void } }
+ */
+export declare const useContextMenuNavigation: (transitionSpeed: number, setTransitionSpeed: React.Dispatch<React.SetStateAction<number>>, menuLabelStack: string[], setMenuLabelStack: React.Dispatch<React.SetStateAction<string[]>>, activeMenuLabel: string | undefined, setActiveMenuLabel: React.Dispatch<React.SetStateAction<string | undefined>>, setSelectedIndex: React.Dispatch<React.SetStateAction<number>>, menuCollection: SubMenuNavigationTemplate[], onMenuResize?: ((height: number, width: number) => void) | undefined) => {
+    handleNavigateToSubmenu: (parentLabel: string) => void;
+    handleNavigateBackToParent: (submenuLabel: string) => void;
+    handleNavigateToBase: () => void;
+};

package/dist/components/controls/CustomContextMenu/useContextMenuNavigation.test.d.ts

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

package/dist/components/controls/CustomContextMenu/useResizeContextMenu.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * Custom hook to resize the context menu frame to fit the active context menu.
+ *
+ * @param activeMenuLabel - label of the currently active menu.
+ * @param setActiveMenuWidth - setState function to update the width of the active menu.
+ * @returns { { resizeContextMenuFrameToActiveMenu: () => { height: number, width: number } } }
+ */
+export declare const useResizeContextMenu: (activeMenuLabel: string | undefined, setActiveMenuWidth: React.Dispatch<React.SetStateAction<number>>) => {
+    resizeContextMenuFrameToActiveMenu: () => {
+        height: number;
+        width: number;
+    };
+};

package/dist/components/controls/CustomContextMenu/useResizeContextMenu.test.d.ts

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

package/dist/components/controls/CustomContextMenu/utils.d.ts

@@ -0,0 +1,3 @@
+import { CustomContextMenuTemplate, SubMenuNavigationTemplate } from './CustomContextMenu';
+export declare const getClassName: (parentLabel: string, activeMenuLabel: string | undefined, menuStack: string[]) => "" | "active_context_menu" | "previous_context_menu";
+export declare const getMenuNavigationOrder: (template: CustomContextMenuTemplate[]) => SubMenuNavigationTemplate[];

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/controls/Button';
 export * from './components/controls/CollapsibleCard';
+export * from './components/controls/CustomContextMenu';
 export * from './components/controls/ExpandableButton';
 export * from './components/controls/Toggle';
 export * from './components/elements/Badge';