@openfin/ui-library 0.12.0-alpha.1678479800 → 0.12.0-alpha.1678913049

package/dist/components/elements/DropdownMenu/dropdownMenu.d.ts

@@ -1,13 +1,13 @@
 import { FC, ReactNode } from 'react';
-import { DropdownOption } from './dropdownOptionsMenu';
+import { MenuOption } from './menu';
 export interface DropdownMenuProps {
     label?: string;
-    selected?: DropdownOption;
-    options?: DropdownOption[];
-    onChange: (value: DropdownOption) => void;
+    selected?: MenuOption;
+    options?: MenuOption[][];
+    onChange: (value: MenuOption) => void;
     onOptionHover?: (value?: unknown) => void;
     placeholder?: string;
-    renderLabel?: (option: DropdownOption, isOpen: boolean, onClick: () => void) => ReactNode;
+    renderLabel?: (option: MenuOption, isOpen: boolean, onClick: () => void) => ReactNode;
     fitContent?: boolean;
 }
 export declare const DropdownMenu: FC<DropdownMenuProps>;

package/dist/components/elements/DropdownMenu/index.d.ts

@@ -1 +1,2 @@
 export * from './dropdownMenu';
+export * from './menu';

package/dist/components/elements/DropdownMenu/menu.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+export interface MenuOption {
+    title: string;
+    value: unknown;
+    iconUrl?: string;
+    overrideOnClick?: (value?: MenuOption) => void;
+}
+/**
+ * The properties for the Menu component.
+ */
+export interface MenuProps {
+    /**
+     * An array of options to be displayed in the menu. The outer array represents the rows of the menu, while the inner arrays represent the columns.
+     */
+    options: MenuOption[][];
+    /**
+     * The currently selected option in the menu.
+     */
+    selected?: MenuOption;
+    /**
+     * The ID of the DropdownMenu component associated with this Menu.
+     */
+    dropdownMenuId: string;
+    /**
+     * A function to be called to close the menu.
+     */
+    handleExpandMenu: () => void;
+    /**
+     * A function to be called when an option in the menu is hovered over.
+     */
+    onOptionHover?: (value?: unknown) => void;
+    /**
+     * A function to be called when an option in the menu is selected/clicked.
+     */
+    onChange: (value: MenuOption) => void;
+    /**
+     * Whether the width of the menu should fit its contents
+     */
+    fitContent?: boolean;
+    /**
+     * The width of the menu, as a CSS string, default to 100% of the parent container.
+     */
+    width?: string;
+    /**
+     * The height of the menu, as a CSS string.
+     */
+    height?: string;
+    /**
+     * The text to be displayed as the header of the menu.
+     */
+    header?: string;
+    /**
+     * The currently focused option in the menu.
+     */
+    focusedOption: MenuOption;
+}
+export declare const Menu: React.FC<MenuProps>;

package/dist/components/elements/DropdownMenu/{dropdownOptionTitle.d.ts → optionTitle.d.ts}

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { TextProps } from '../../typography/Text';
-interface DropdownOptionTitleProps extends Omit<TextProps, 'children'> {
+interface OptionTitleProps extends Omit<TextProps, 'children'> {
     children?: string;
 }
 /**
  * A single line of Text that will overflow with ellipsis. When overflown mousing over the text will display a tooltip with the text content.
  */
-export declare const DropdownOptionTitle: FC<DropdownOptionTitleProps>;
+export declare const OptionTitle: FC<OptionTitleProps>;
 /**
  * Checks if a element's content is overflown.
  */

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -15,6 +15,7 @@ export declare const Color: {
     readonly lightGray5: "#C9CBD2";
     readonly neutralGray: "#7D808A";
     readonly neutralGray80: "rgba(125,128,138,0.8)";
+    readonly silverGray: "#C0C1C2";
     readonly darkGray1: "#53565F";
     readonly darkGray2: "#383A40";
     readonly darkGray3: "#2F3136";

package/dist/components/system/ThemeProvider/lib/palette.d.ts

@@ -30,6 +30,7 @@ export declare const Palette: {
     readonly textDefault: "textDefault";
     readonly textHelp: "textHelp";
     readonly textInactive: "textInactive";
+    readonly borderNeutral: "borderNeutral";
     readonly contentBackground1: "contentBackground1";
     readonly contentBackground2: "contentBackground2";
     readonly contentBackground3: "contentBackground3";

package/dist/hooks/useDropdownKeyboardNavigation.d.ts

@@ -0,0 +1,16 @@
+import { KeyboardEvent } from 'react';
+import { MenuOption } from '../components/elements/DropdownMenu';
+/**
+ * Hook that handles keyboard navigation and type-to-select functionality of a dropdown menu and returns the focused option.
+ *
+ * @param {MenuOption[][]} options - An array of dropdown options, with each nested array representing a row of options.
+ * @param {MenuOption} selected - The currently selected dropdown option.
+ * @param {boolean} expandMenu - Whether the dropdown menu is expanded or not.
+ * @param {(toggle?: boolean) => void} handleExpandMenu - Function to handle toggling the dropdown menu.
+ * @param {(value: MenuOption) => void} onChange - Function to handle changing the selected option.
+ * @returns {{ focusedOption: MenuOption, handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void }} - The currently focused option and a function to handle keydown events.
+ */
+export declare const useDropdownKeyboardNavigation: (options: MenuOption[][], selected: MenuOption | undefined, expandMenu: boolean, handleExpandMenu: (toggle?: boolean) => void, onChange: (value: MenuOption) => void) => {
+    focusedOption: MenuOption;
+    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/index.d.ts

@@ -25,5 +25,6 @@ export * from './components/typography/Text';
 export * from './hooks/useColorScheme';
 export * from './hooks/useMediaQuery';
 export * from './hooks/usePrevious';
+export * from './hooks/useDropdownKeyboardNavigation';
 export * as StoryHelpers from './storybookHelpers';
 export * from './lib/whenFin';