@progress/kendo-react-layout 13.3.0 → 13.4.0-develop.2

package/menu/BaseMenuItemInternalProps.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupCloseEvent } from '@progress/kendo-react-popup';
+/**
+ * @hidden
+ */
+export interface BaseMenuItemInternalProps {
+    focusedItemId: string;
+    lastItemIdToBeOpened: string;
+    tabbableItemId: string;
+    itemRender?: any;
+    linkRender?: any;
+    isMenuVertical: boolean;
+    isDirectionRightToLeft?: boolean;
+    menuGuid: string;
+    onMouseOver: any;
+    onMouseLeave: any;
+    onMouseDown: any;
+    onFocus: any;
+    onClick: any;
+    onBlur: any;
+    onOriginalItemNeeded: any;
+    onPopupClose: (itemId: string, popupCloseEvent: PopupCloseEvent) => void;
+}

package/menu/MenuProps.d.ts

@@ -0,0 +1,189 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MenuItemModel } from './models/MenuItemModel.js';
+import { MenuSelectEvent, MenuCloseEvent } from './events.js';
+import { PopupAnimation } from '@progress/kendo-react-popup';
+/**
+ * The properties of the [KendoReact Menu component](https://www.telerik.com/kendo-react-ui/components/layout/menu).
+ */
+export interface MenuProps {
+    /**
+     * Specifies whether the Menu will be vertical
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/vertical)).
+     *
+     * @example
+     * ```jsx
+     * <Menu vertical />
+     * ```
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Sets the Menu items.
+     *
+     * @example
+     * ```jsx
+     * const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
+     * <Menu items={items} />
+     * ```
+     */
+    items?: MenuItemModel[];
+    /**
+     * Sets the Menu items declaratively.
+     *
+     * @example
+     * ```jsx
+     * <Menu>
+     *   <MenuItem text="Item 1" />
+     *   <MenuItem text="Item 2" />
+     * </Menu>
+     * ```
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the Menu.
+     *
+     * @example
+     * ```jsx
+     * <Menu style={{ backgroundColor: 'lightblue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the ID of the Menu.
+     *
+     * @example
+     * ```jsx
+     * <Menu id="custom-menu" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Controls the Popup animation.
+     *
+     * @example
+     * ```jsx
+     * <Menu animate={{ openDuration: 200, closeDuration: 200 }} />
+     * ```
+     *
+     * @default true
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Sets the direction of the Menu.
+     *
+     * @example
+     * ```jsx
+     * <Menu dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Specifies the delay in milliseconds before the Menu items are closed on
+     * item mouse-leave ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/open-close#toc-delay-on-hover)).
+     * Used to avoid accidental closure on leaving.
+     *
+     * @example
+     * ```jsx
+     * <Menu hoverOpenDelay={200} />
+     * ```
+     *
+     * @default 100
+     */
+    hoverOpenDelay?: number;
+    /**
+     * Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/open-close#toc-delay-on-hover)).
+     *
+     * @example
+     * ```jsx
+     * <Menu hoverCloseDelay={200} />
+     * ```
+     *
+     * @default 100
+     */
+    hoverCloseDelay?: number;
+    /**
+     * If `openOnClick` is set to `true`, the items are opened on mouse hover only after an initial click.
+     *
+     * @example
+     * ```jsx
+     * <Menu openOnClick />
+     * ```
+     *
+     * @default false
+     */
+    openOnClick?: boolean;
+    /**
+     * A React functional or class component which is used for rendering the innermost part of
+     * the Menu item ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/items/rendering#toc-items)).
+     * By default, the innermost item part includes only the text for the item.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     * <Menu itemRender={CustomItem} />
+     * ```
+     */
+    itemRender?: any;
+    /**
+     * A React functional or class component which is used for rendering the link of the item
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/items/rendering#toc-links)).
+     * The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     *
+     * @example
+     * ```jsx
+     * const CustomLink = (props) => <a href={props.href}>{props.text}</a>;
+     * <Menu linkRender={CustomLink} />
+     * ```
+     */
+    linkRender?: any;
+    /**
+     * Sets the ids of the Menu items that will not be closed on mouse-leave. The ids are hierarchical and zero-based.
+     * The first root item has a `0` id. If the first root item has children,
+     * the first child item acquires a `0_0` id and the second acquires a `0_1` id.
+     *
+     * @example
+     * ```jsx
+     * <Menu customCloseItemIds={['0', '0_1']} />
+     * ```
+     */
+    customCloseItemIds?: string[];
+    /**
+     * Adds a custom className to the Menu top element.
+     *
+     * @example
+     * ```jsx
+     * <Menu className="custom-menu" />
+     * ```
+     */
+    className?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
+    /**
+     * Fires when a Menu item is selected.
+     *
+     * @example
+     * ```jsx
+     * <Menu onSelect={(event) => console.log(event.item.text)} />
+     * ```
+     */
+    onSelect?: (event: MenuSelectEvent) => void;
+    /**
+     * Fires when a Menu item is closed.
+     *
+     * @example
+     * ```jsx
+     * <Menu onClose={(event) => console.log('Item closed:', event.item.text)} />
+     * ```
+     */
+    onClose?: (event: MenuCloseEvent) => void;
+}

package/menu/components/Menu.d.ts

@@ -0,0 +1,132 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { MenuProps } from '../MenuProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface MenuState {
+    focusedItemId: string;
+    hoveredItemId: string;
+    tabbableItemId: string;
+    isFirstRender: boolean;
+}
+/**
+ * Represents the [KendoReact Menu component](https://www.telerik.com/kendo-react-ui/components/layout/menu).
+ *
+ * @remarks
+ * Supported children components are: {@link MenuItem}.
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *    return (
+ *        <Menu>
+ *            <MenuItem text="Item1" />
+ *            <MenuItem text="Item2">
+ *                <MenuItem text="Item2.1" />
+ *                <MenuItem text="Item2.2" />
+ *            </MenuItem>
+ *            <MenuItem text="Item3" />
+ *        </Menu>
+ *    );
+ * }
+ * ```
+ */
+export declare class Menu extends React.Component<MenuProps, MenuState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        vertical: PropTypes.Requireable<boolean>;
+        items: PropTypes.Requireable<(object | null | undefined)[]>;
+        style: PropTypes.Requireable<object>;
+        animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            openDuration: PropTypes.Requireable<number>;
+            closeDuration: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        dir: PropTypes.Requireable<string>;
+        hoverOpenDelay: PropTypes.Requireable<number>;
+        hoverCloseDelay: PropTypes.Requireable<number>;
+        openOnClick: PropTypes.Requireable<boolean>;
+        itemRender: PropTypes.Requireable<any>;
+        linkRender: PropTypes.Requireable<any>;
+        customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        role: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        vertical: boolean;
+        animate: boolean;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: MenuState;
+    private itemHoverRequest;
+    private itemLeaveRequest;
+    private menuWrapperEl;
+    private get menuItemId();
+    private directionHolder;
+    private inputItems;
+    private items;
+    private mouseOverHandler;
+    /**
+     * The current element or `null` if there is no one.
+     */
+    get element(): HTMLDivElement | null;
+    constructor(props: MenuProps);
+    protected get animate(): boolean;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: MenuProps): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * Resets the selection and opening of Menu items.
+     */
+    reset: () => void;
+    private onKeyDown;
+    private onItemMouseOver;
+    private onItemMouseLeave;
+    private onItemMouseDown;
+    private onItemFocus;
+    private onItemClick;
+    private onPopupClose;
+    private onItemBlur;
+    private getInputItem;
+    private setFocusedItemId;
+    private setHoveredItemId;
+    private getMenuClassName;
+    private clearItemHoverAndLeaveRequestsIfApplicable;
+    private isItemWithDefaultClose;
+    private checkIsDirectionRightToLeft;
+    private prepareItems;
+    private dispatchSelectEventIfWired;
+}
+/**
+ * Represent the `ref` of the Menu component.
+ */
+export interface MenuHandle extends Pick<Menu, keyof Menu> {
+}

package/menu/components/Menu.mjs

@@ -8,7 +8,7 @@
 import * as m from "react";
 import i from "prop-types";
 import { Keys as h, classNames as g, dispatchEvent as b } from "@progress/kendo-react-common";
-import { EMPTY_ID as r, getItemById as a, isIdZeroLevel as p, getDirectParentId as C, getRootParentId as R, isIdEmptyOrZeroLevel as l, ZERO_LEVEL_ZERO_ITEM_ID as f } from "../utils/itemsIdsUtils.mjs";
+import { ZERO_LEVEL_ZERO_ITEM_ID as f, EMPTY_ID as r, getItemById as a, isIdZeroLevel as p, getDirectParentId as C, getRootParentId as R, isIdEmptyOrZeroLevel as l } from "../utils/itemsIdsUtils.mjs";
 import { prepareInputItemsForInternalWork as D } from "../utils/prepareInputItemsForInternalWork.mjs";
 import { getNewItemIdUponKeyboardNavigation as I } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
 import { getHoverOpenDelay as H, getHoverCloseDelay as O } from "../utils/hoverDelay.mjs";

package/menu/components/MenuItem.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { BaseMenuItem } from '../models/BaseMenuItem.js';
+import * as React from 'react';
+/**
+ * The properties of the KendoReact MenuItem component ([more information and examples](https://www.telerik.com/kendo-react-ui/components/layout/menu/items/items)).
+ */
+export interface MenuItemProps extends BaseMenuItem {
+}
+/**
+ * Represents the MenuItem component.
+ *
+ * @remarks
+ * Supported children components are: {@link MenuItem}.
+ */
+export declare class MenuItem extends React.Component<MenuItemProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        text: PropTypes.Requireable<string>;
+        url: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        cssClass: PropTypes.Requireable<string>;
+        cssStyle: PropTypes.Requireable<object>;
+        render: PropTypes.Requireable<any>;
+        linkRender: PropTypes.Requireable<any>;
+        contentRender: PropTypes.Requireable<any>;
+        data: PropTypes.Requireable<any>;
+        separator: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    render(): null;
+}

package/menu/components/MenuItemArrow.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import * as React from 'react';
+/**
+ * The properties of the KendoReact MenuItemArrow component.
+ */
+export interface MenuItemArrowProps {
+    /**
+     * Sets the item id of the MenuItemArrow component.
+     */
+    itemId: string;
+    /**
+     * Sets the direction of the MenuItemArrow component.
+     */
+    dir: 'ltr' | 'rtl';
+    /**
+     * Specifies whether the Menu which holds the MenuItemArrow component is vertical.
+     */
+    verticalMenu?: boolean;
+}
+/**
+ * @hidden
+ */
+export declare const downArrowName = "caret-alt-down";
+/**
+ * @hidden
+ */
+export declare const rightArrowName = "caret-alt-right";
+/**
+ * @hidden
+ */
+export declare const leftArrowName = "caret-alt-left";
+export declare class MenuItemArrow extends React.Component<MenuItemArrowProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        itemId: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+        verticalMenu: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private getIcon;
+}

package/menu/components/MenuItemInternal.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MenuItemInternalModel } from '../models/MenuItemModel.js';
+import { PopupAnimation } from '@progress/kendo-react-popup';
+import { BaseMenuItemInternalProps } from './../BaseMenuItemInternalProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
+    items: MenuItemInternalModel[];
+    parentItemId?: string;
+    className: string;
+    animate?: boolean | PopupAnimation;
+    role?: string;
+    'aria-orientation'?: 'vertical';
+}
+/**
+ * @hidden
+ */
+export declare class MenuItemInternalsList extends React.Component<MenuItemInternalsListProps, {}> {
+    render(): React.JSX.Element;
+    private renderChildItems;
+    private onMouseOver;
+    private onMouseLeave;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalProps extends BaseMenuItemInternalProps {
+    item: MenuItemInternalModel;
+    animate?: boolean | PopupAnimation;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalState {
+    opened: boolean;
+}
+/**
+ * @hidden
+ */
+export declare class MenuItemInternal extends React.Component<MenuItemInternalProps, MenuItemInternalState> {
+    readonly state: MenuItemInternalState;
+    private itemElement;
+    private isFirstRender;
+    constructor(props: MenuItemInternalProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: MenuItemInternalProps): void;
+    render(): React.JSX.Element;
+    private renderContent;
+    private renderMenuItemLink;
+    private renderPopupIfOpened;
+    private renderMenuIconIfApplicable;
+    private renderArrowIfApplicable;
+    private onMouseOver;
+    private onMouseLeave;
+    private get itemRender();
+    private onPopupClose;
+    private get linkRender();
+    private get contentRender();
+    private get Opened();
+    private getPopupClassName;
+    private getMenuItemClassName;
+}

package/menu/components/MenuItemLink.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * The properties of the KendoReact MenuItemLink component.
+ */
+export interface MenuItemLinkProps extends KendoReactComponentBaseProps {
+    /**
+     * Specifies whether the MenuItemLink component is opened.
+     */
+    opened: boolean;
+    /**
+     * Sets the URL of the MenuItemLink component.
+     */
+    url?: string;
+}
+export declare class MenuItemLink extends React.Component<MenuItemLinkProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        opened: PropTypes.Requireable<boolean>;
+        url: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private getMenuItemClassName;
+}

package/menu/consts.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const POPUP_SETTINGS_RTL: {
+    downward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+        animationDirection: string;
+    };
+    leftward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+        animationDirection: string;
+    };
+};
+/**
+ * @hidden
+ */
+export declare const POPUP_SETTINGS: {
+    downward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+        animationDirection: string;
+    };
+    rightward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+        animationDirection: string;
+    };
+};

package/menu/events.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Menu } from './components/Menu.js';
+import { MenuItemModel } from './models/MenuItemModel.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+import { PopupCloseEvent } from '@progress/kendo-react-popup';
+/**
+ * The arguments for the `select` event of the Menu. If the item has a URL and the event is prevented, navigation to the URL does not occur.
+ */
+export interface MenuSelectEvent extends BaseEvent<Menu> {
+    /**
+     * The id of selected item. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child acquires a `0_0` id and the second acquires a `0_1` id.
+     */
+    itemId: string;
+    /**
+     * The selected item.
+     */
+    item: MenuItemModel;
+}
+/**
+ * The arguments for the `itemClose` event of the Menu.
+ */
+export interface MenuCloseEvent {
+    /**
+     * The Menu component instance.
+     */
+    target: Menu;
+    /**
+     * The id of the item whose popup was closed. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child acquires a `0_0` id and the second acquires a `0_1` id.
+     */
+    itemId: string;
+    /**
+     * The closed item.
+     */
+    item: MenuItemModel;
+    /**
+     * The popup close event if the close was triggered by a popup closing .
+     */
+    popupCloseEvent?: PopupCloseEvent;
+}