@openfin/ui-library 0.31.3-alpha.20251106171135 → 0.31.3

package/README.md

@@ -1,6 +1,6 @@
-# @openfin/ui-library
+# OpenFin UI Library
 
-A React component library for OpenFin applications.
+> React component library for OpenFin Workspace products – Informed by [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components).
 
 **Storybook:** [cdn.openfin.co/workspace/storybook](https://cdn.openfin.co/workspace/storybook)
 **NPM Package:** [@openfin/ui-library](https://www.npmjs.com/package/@openfin/ui-library)

package/dist/assets/fonts/index.d.ts

@@ -0,0 +1,2 @@
+import type { ImportFonts } from '../../components/system';
+export declare const Fonts: ImportFonts;

package/dist/assets/index.d.ts

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

package/dist/components/controls/Button/button.d.ts

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import { ButtonShape, ButtonSize, ButtonKind, ButtonLayout } from './button.variants';
+type ButtonPropsWithLabel = {
+    children?: never;
+};
+type ButtonPropsWithChildren = {
+    children: ReactNode;
+};
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & (ButtonPropsWithLabel | ButtonPropsWithChildren) & {
+    label?: string;
+    href?: string;
+    size?: keyof typeof ButtonSize;
+    shape?: keyof typeof ButtonShape;
+    kind?: keyof typeof ButtonKind;
+    layout?: keyof typeof ButtonLayout;
+    children?: ReactNode;
+};
+/**
+ * Button as Anchor
+ * @example <Button as="a" href="https://..." />
+ *
+ * Button with Label
+ * @example <Button label="..." />
+ *
+ * Button with Child Element
+ * @example <Button><Child /></Button>
+ */
+export declare const Button: FC<ButtonProps>;
+/**
+ * ## Button Variants
+ */
+export declare const ButtonPrimary: FC<ButtonProps>;
+export declare const ButtonSecondary: FC<ButtonProps>;
+export declare const ButtonTextOnly: FC<ButtonProps>;
+export {};

package/dist/components/controls/Button/button.variants.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Define all Button Variants here in one place.
+ * Variants should match the variants in Figma
+ */
+export declare const Variant: {
+    readonly shape: "shape";
+    readonly size: "size";
+    readonly kind: "kind";
+    readonly layout: "layout";
+};
+/**
+ * Button Type -- Describes the "role" of a button
+ */
+export declare const ButtonKind: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly textOnly: "textOnly";
+};
+export type ButtonKindType = keyof typeof ButtonKind;
+/**
+ * Button Size
+ */
+export declare const ButtonSize: {
+    readonly small: "small";
+    readonly base: "base";
+    readonly large: "large";
+};
+export type ButtonSizeType = keyof typeof ButtonSize;
+/**
+ * Button Width
+ */
+export declare const ButtonLayout: {
+    readonly fit: "fit";
+    readonly full: "full";
+};
+export type ButtonLayoutType = keyof typeof ButtonLayout;
+/**
+ * Button Shape
+ */
+export declare const ButtonShape: {
+    readonly square: "square";
+    readonly pill: "pill";
+};
+export type ButtonShapeType = keyof typeof ButtonShape;
+export declare const variants: {
+    readonly size: {
+        readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+    readonly shape: {
+        readonly square: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly pill: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+    readonly layout: {
+        readonly fit: import("styled-components").FlattenSimpleInterpolation;
+        readonly full: import("styled-components").FlattenSimpleInterpolation;
+    };
+    readonly kind: {
+        readonly primary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly secondary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly textOnly: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+};

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

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './button.variants';

package/dist/components/controls/ClickableNavigation/clickableNavigation.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+export type ClickableNavigationButtonProps = {
+    onClick?: () => void;
+    children?: ReactNode;
+};
+export type ClickableNavigationLinkProps = {
+    to?: string;
+    children?: ReactNode;
+};
+export declare const ClickableNavigationLink: FC<ClickableNavigationLinkProps>;
+export declare const ClickableNavigationButton: FC<ClickableNavigationButtonProps>;

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

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

package/dist/components/controls/CollapsibleCard/cardContainer.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export type CardContainerProps = {
+    maxHeight: number | string;
+    children: ReactNode;
+};
+export declare const CardContainer: FC<CardContainerProps>;

package/dist/components/controls/CollapsibleCard/collapsibleCard.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+export interface CollapsibleCardProps extends Omit<CollapsibleCardStatelessProps, 'expanded' | 'onExpand'> {
+    expanded?: boolean;
+}
+export declare const CollapsibleCard: FC<CollapsibleCardProps>;
+export interface CollapsibleCardHeaderSettings {
+    fixedHeader?: boolean;
+    zIndex?: number;
+}
+export interface CollapsibleCardStatelessProps {
+    title: string | ReactNode;
+    badgeText?: number;
+    maxHeight?: number;
+    headerSettings?: CollapsibleCardHeaderSettings;
+    children?: ReactNode;
+    expanded: boolean;
+    onExpand: (expanded: boolean) => void;
+}
+export declare const CollapsibleCardStateless: import("react").ForwardRefExoticComponent<CollapsibleCardStatelessProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/controls/ExpandableButton/expandDirection.d.ts

@@ -0,0 +1,4 @@
+export declare enum ExpandDirection {
+    Up = 0,
+    Down = 1
+}

package/dist/components/controls/ExpandableButton/expandableButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+import { ExpandDirection } from './expandDirection';
+export type SecondaryButtonProps = {
+    title: string;
+    disabled?: boolean;
+    onClick: (event: React.MouseEvent, closeSecondaryButtonsPanel?: () => void) => void;
+};
+export type ExpandableButtonProps = Omit<ButtonProps, 'shape'> & {
+    secondaryButtons?: SecondaryButtonProps[];
+    closePanelOnSecondaryButtonClick?: boolean;
+    expandDirection?: ExpandDirection;
+    stretchExpandablePanel?: boolean;
+    document?: Document;
+};
+export declare const ExpandableButton: (props: ExpandableButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/ExpandableButton/expandablePanel.d.ts

@@ -0,0 +1,14 @@
+import { SecondaryButtonProps } from './expandableButton';
+import { ButtonSizeType } from '../Button';
+import { ExpandDirection } from './expandDirection';
+export type ExpandablePanelProps = {
+    secondaryButtons: SecondaryButtonProps[];
+    onCollapseRequest: () => void;
+    closePanelOnSecondaryButtonClick?: boolean;
+    buttonSize?: ButtonSizeType;
+    expandDirection: ExpandDirection;
+    panelId?: string;
+    stretch?: boolean;
+    document?: Document;
+};
+export declare const ExpandablePanel: (props: ExpandablePanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/ExpandableButton/expandablePanel.setup.d.ts

@@ -0,0 +1,2 @@
+import { ExpandDirection } from './expandDirection';
+export declare const setupExpandablePanel: (node: HTMLDivElement, expandDirection: ExpandDirection, stretch?: boolean) => void;

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

@@ -0,0 +1,2 @@
+export * from './expandableButton';
+export * from './expandDirection';

package/dist/components/controls/Menus/ContentMenu/ContentMenu.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ContentMenuItemSelectEvent } from './ContentMenuItem/ContentMenuItem';
+export type ContentMenuEntry = {
+    bookmarked?: boolean;
+} & ({
+    type: 'folder';
+    id: string;
+    label: string;
+    children: ContentMenuEntry[];
+} | {
+    type: 'item';
+    id: string;
+    icon?: string | {
+        dark: string;
+        light: string;
+    };
+    label: string;
+    itemData: any;
+});
+export interface ContentMenuProps {
+    /**
+     * The list of content menu items at the first level of the content menu.
+     */
+    structure: ContentMenuEntry[];
+    /**
+     * Callback to handle a click on a content menu item.
+     */
+    handleClickItem: (entry: ContentMenuEntry, mouseEvent: ContentMenuItemSelectEvent) => void;
+    /**
+     * Callback to handle a click on the bookmark icon of a content menu item.
+     */
+    handleBookmarkItem: (entry: ContentMenuEntry) => void;
+    /**
+     * The ID of the target content menu item to search for and be navigated to within the content menu.
+     */
+    targetId?: string;
+    /**
+     * Disable bookmark icon and functionality for all content menu items.
+     */
+    disableBookmarking?: boolean;
+    /**
+     * Selected scheme to determine which variant of app icons to show.
+     */
+    selectedScheme?: 'dark' | 'light';
+}
+type SearchNode = {
+    children?: SearchNode[];
+    id: string;
+};
+export declare const findPathToItemWithId: (node: SearchNode, path: string[], targetId: string) => string[] | undefined;
+export declare const ContentMenu: React.FC<ContentMenuProps>;
+export {};

package/dist/components/controls/Menus/ContentMenu/ContentMenuColumn/ContentMenuColumn.d.ts

@@ -0,0 +1,17 @@
+import React, { Dispatch, PropsWithChildren, SetStateAction } from 'react';
+import { ContentMenuEntry } from '../ContentMenu';
+import { ContentMenuItemSelectEvent } from '../ContentMenuItem/ContentMenuItem';
+export interface ContentMenuColumnProps {
+    entries: ContentMenuEntry[];
+    parentEntry: ContentMenuEntry | null;
+    depth: number;
+    path: string[];
+    targetItemId: string | undefined;
+    setCurrentlySelectedPath: Dispatch<SetStateAction<string[]>>;
+    handleClickItem: (entry: ContentMenuEntry, mouseEvent: ContentMenuItemSelectEvent) => void;
+    handleBookmarkItem: (entry: ContentMenuEntry) => void;
+    toggleTooltip: (label?: string, element?: HTMLDivElement) => void;
+    disableBookmarking?: boolean;
+    selectedScheme?: 'dark' | 'light';
+}
+export declare const ContentMenuColumn: React.FC<PropsWithChildren<ContentMenuColumnProps>>;

package/dist/components/controls/Menus/ContentMenu/ContentMenuContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ContentMenuContext: React.Context<{
+    focusedContentItemId: string | null;
+    setFocusedContentItemId: (id: string) => void;
+}>;

package/dist/components/controls/Menus/ContentMenu/ContentMenuItem/ContentMenuItem.d.ts

@@ -0,0 +1,56 @@
+import { ContentMenuEntry } from '../ContentMenu';
+import React, { MouseEvent } from 'react';
+export type ContentMenuItemSelectEvent = Pick<MouseEvent, 'ctrlKey' | 'metaKey' | 'shiftKey'>;
+export interface ContentMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Object representing the content menu item entry.
+     */
+    entry: ContentMenuEntry;
+    /**
+     * Boolean indicating whether the content menu item is active. When active, the content menu item is highlighted with a background color.
+     * Only applicable to folder items.
+     */
+    active: boolean;
+    /**
+     * Callback to handle a click on the content menu item.
+     */
+    handleClick: (entry: ContentMenuEntry, mouseEvent: ContentMenuItemSelectEvent) => void;
+    /**
+     * Callback to toggle a tooltip for the content menu item.
+     */
+    toggleTooltip: (label?: string, element?: HTMLDivElement) => void;
+    /**
+     * Callback to handle a click on the bookmark icon of the content menu item.
+     */
+    handleBookmark?: (entry: ContentMenuEntry) => void;
+    disableBookmarking?: boolean;
+    /**
+     * Selected scheme to determine which variant of app icons to show.
+     */
+    selectedScheme?: 'dark' | 'light';
+}
+export declare const ContentMenuItem: React.FC<ContentMenuItemProps>;
+interface ContentMenuItemContainerProps {
+    active?: boolean;
+}
+export declare const ContentMenuItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, React.HTMLAttributes<HTMLDivElement> & {
+    alignItems?: import("../../../../layout/Box/types").AlignItems | undefined; /**
+     * Object representing the content menu item entry.
+     */
+    display?: import("../../../../layout/Box/types").Display | undefined;
+    flexDirection?: import("../../../../layout/Box/types").FlexDirection | undefined;
+    flexWrap?: import("../../../../layout/Box/types").FlexWrap | undefined;
+    justifyContent?: import("../../../../layout/Box/types").JustifyContent | undefined;
+    gap?: "base" | "small" | "xsmall" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+    alignSelf?: import("../../../../layout/Box/types").AlignSelf | undefined;
+    flexBasis?: string | undefined;
+    flexGrow?: 0 | 1 | undefined;
+    flexShrink?: 0 | 1 | undefined;
+    order?: number | undefined;
+    background?: import("../../../../layout/Box/types").BackgroundLevel | undefined;
+    padding?: "base" | "small" | "xsmall" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+} & {
+    enabled?: string | undefined;
+    selected?: boolean | undefined;
+} & ContentMenuItemContainerProps, never>;
+export {};

package/dist/components/controls/Menus/ContentMenu/ContentMenuItem/IconWithFallback.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IconWithFallbackProps {
+    iconUrl?: string;
+    alt?: string;
+}
+export declare const IconWithFallback: React.FC<IconWithFallbackProps>;
+export {};

package/dist/components/controls/Menus/ContentMenu/ContentMenuItem/useImageLoader.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Custom hook that provides that loading and success state of retrieving an icon by URL.
+ *
+ * @param { src } string - Source URL for the icon image.
+ * @returns {isImageReady} boolean - Boolean indicate whether image is ready to be shown.
+ */
+export type ImageState = 'error' | 'loading' | 'success';
+export declare const useImageLoader: (src?: string) => ImageState;

package/dist/components/controls/Menus/ContentMenu/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TooltipProps {
+    label?: string;
+    element?: HTMLDivElement;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/dist/components/controls/Menus/ContentMenu/index.d.ts

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

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

@@ -0,0 +1,96 @@
+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 ContextMenuTemplate<Data = CustomContextMenuData> = {
+    /**
+     * Can be `normal`, `separator`, `submenu`, or `checkbox`.
+     * Defaults to 'normal' unless a 'submenu' key exists
+     */
+    type?: 'normal' | 'separator' | 'submenu' | 'checkbox' | 'widget';
+    /**
+     * 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?: Data;
+    /**
+     * Image Data URI with image dimensions inferred from the encoded string
+     */
+    icon?: string;
+};
+export interface WidgetContextMenuTemplate<Data = CustomContextMenuData> extends ContextMenuTemplate {
+    type: 'widget';
+    config: {
+        type: 'add-to-channel';
+        channels: ({
+            color: string;
+            label?: string;
+            data: Data;
+            checked?: boolean;
+        } | {
+            isNone: boolean;
+            label?: string;
+            data: Data;
+        })[];
+    };
+}
+export type CustomContextMenuTemplate<Data = CustomContextMenuData> = ContextMenuTemplate<Data> | WidgetContextMenuTemplate<Data>;
+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/Menus/CustomContextMenu/CustomContextMenuItems/ColorLinkingContextMenuWidget.d.ts

@@ -0,0 +1,10 @@
+import { WidgetContextMenuTemplate } from '../CustomContextMenu';
+import { WidgetCustomContextMenuItemProps } from './WidgetCustomContextMenuItem';
+type ColorLinkingContextMenuWidgetProps = {
+    config: Extract<WidgetContextMenuTemplate['config'], {
+        type: 'add-to-channel';
+    }>;
+    onClick: WidgetCustomContextMenuItemProps['onClick'];
+};
+export declare const ColorLinkingContextMenuWidget: ({ config, onClick, }: ColorLinkingContextMenuWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/controls/Menus/CustomContextMenu/CustomContextMenuItems/CustomContextMenuItem.d.ts

@@ -0,0 +1,11 @@
+import { CustomContextMenuData, SubmenulessMenuItemTemplate } from '../CustomContextMenu';
+export type CustomContextMenuItemData = Omit<SubmenulessMenuItemTemplate, 'type' | 'hasSubMenu'> & {
+    type?: SubmenulessMenuItemTemplate['type'] | 'submenuHeader';
+    hasSubMenu?: boolean;
+    showShouldHomeButton?: boolean;
+    onClick?: (data?: CustomContextMenuData) => void;
+    onClose?: () => void;
+    onBack?: () => void;
+    selected?: boolean;
+};
+export declare const CustomContextMenuItem: ({ type, icon, label, enabled, checked, hasSubMenu, showShouldHomeButton, onClick, onClose, onBack, selected, ...rest }: CustomContextMenuItemData) => import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Menus/CustomContextMenu/CustomContextMenuItems/NormalCustomContextMenuItem.d.ts

@@ -0,0 +1,6 @@
+import { ContextMenuTemplate, CustomContextMenuData } from '../CustomContextMenu';
+export type NormalCustomContextMenuItemProps = ContextMenuTemplate & {
+    onClick?: (data?: CustomContextMenuData) => void;
+    selected?: boolean;
+};
+export declare const NormalCustomContextMenuItem: ({ type, label, enabled, checked, submenu, onClick, selected, data, }: NormalCustomContextMenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Menus/CustomContextMenu/CustomContextMenuItems/RootMenuHeader.d.ts

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

package/dist/components/controls/Menus/CustomContextMenu/CustomContextMenuItems/SeparatorCustomContextMenuItem.d.ts

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

package/dist/components/controls/Menus/CustomContextMenu/CustomContextMenuItems/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) => import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Menus/CustomContextMenu/CustomContextMenuItems/WidgetCustomContextMenuItem.d.ts

@@ -0,0 +1,5 @@
+import { CustomContextMenuData, WidgetContextMenuTemplate } from '../CustomContextMenu';
+export type WidgetCustomContextMenuItemProps = WidgetContextMenuTemplate & {
+    onClick?: (data?: CustomContextMenuData) => void;
+};
+export declare const WidgetCustomContextMenuItem: ({ label, enabled, onClick, config, }: WidgetCustomContextMenuItemProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/controls/Menus/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, method: 'click' | 'keyboard') => 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, method: 'click' | 'keyboard') => void, handleNavigateToBase: () => void) => void;

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

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

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

@@ -0,0 +1,25 @@
+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>> } setActiveMenuWidth - setState function to update the width of active menu's DOM element.
+ * @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>>, setActiveMenuDimensions: React.Dispatch<React.SetStateAction<{
+    width: number;
+    height: number;
+}>>, setSelectedIndex: React.Dispatch<React.SetStateAction<number>>, menuCollection: SubMenuNavigationTemplate[], onMenuResize?: ((height: number, width: number) => void) | undefined) => {
+    handleNavigateToSubmenu: (parentLabel: string) => void;
+    handleNavigateBackToParent: (submenuLabel: string, method?: 'click' | 'keyboard') => void;
+    handleNavigateToBase: () => void;
+};

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * Custom hook to resize the context menu frame to fit the active context menu.
+ *
+ * @param @optional activeMenuLabel - label of the currently active menu.
+ * @returns { { resizeContextMenuFrameToActiveMenu: () => { height: number, width: number } } }
+ */
+export declare const useResizeContextMenu: (activeMenuLabel: string | undefined) => {
+    width: number;
+    height: number;
+};

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

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

package/dist/components/controls/Menus/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[];