@progress/kendo-react-buttons 13.3.0-develop.9 → 13.4.0-develop.1

package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -0,0 +1,354 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FloatingActionButtonPopupSettings } from './FloatingActionButtonPopupSettings.js';
+import { FloatingActionButtonItemProps } from '../FloatingActionButtonItem.js';
+import { FloatingActionButtonAlign } from '../models/align.js';
+import { FloatingActionButtonAlignOffset } from '../models/align-offset.js';
+import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events.js';
+import { FloatingActionButtonPositionMode } from '../models/position-mode.js';
+import { FloatingActionButtonSize } from '../models/size.js';
+import { FloatingActionButtonThemeColor } from '../models/theme-color.js';
+import { FloatingActionButtonRounded } from '../models/rounded.js';
+import { SVGIcon } from '@progress/kendo-react-common';
+/**
+ * @hidden
+ */
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+/**
+ * Represents the props of the [KendoReact FloatingActionButton component](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton).
+ */
+export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onBlur' | 'onFocus' | 'onKeyDown' | 'onClick'> {
+    /**
+     * Sets additional CSS styles to the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton style={{ backgroundColor: 'blue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies a list of CSS classes that will be added to the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton className="custom-fab" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute for text direction.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Sets the `id` property of the root HTML element.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton id="fab1" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Specifies if the FloatingActionButton is disabled.
+     *
+     * @default false
+     * @example
+     * ```jsx
+     * <FloatingActionButton disabled />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Defines the icon that renders in the FloatingActionButton.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton icon="k-icon k-i-plus" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon that renders in the FloatingActionButton.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <FloatingActionButton svgIcon={gearIcon} />
+     * ```
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines a custom CSS class for the icon.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton iconClass="custom-icon-class" />
+     * ```
+     */
+    iconClass?: string;
+    /**
+     * Specifies the text of the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton text="Click me" />
+     * ```
+     */
+    text?: string;
+    /**
+     * Specifies the horizontal and vertical offset of the FloatingActionButton.
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/positioning).
+     *
+     * Normally, the floating button positions next to the boundaries of its container with a default offset of `16px`.
+     *
+     * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
+     * not in a corner, can be moved along the container's boundary or towards the center of the container.
+     *
+     * A negative offset can force a button to overflow the boundaries of its container.
+     *
+     * The possible keys are:
+     * * `x` — Sets the horizontal offset of the FloatingActionButton.
+     * * `y` — Sets the vertical offset of the FloatingActionButton.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton alignOffset={{ horizontal: 10, vertical: 20 }} />
+     * ```
+     */
+    alignOffset?: FloatingActionButtonAlignOffset;
+    /**
+     * Specifies the alignment of the FloatingActionButton within its container.
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/positioning).
+     *
+     * > Centering the FloatingActionButton in both horizontal and vertical dimension is not a typical use case.
+     * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and vertical: "middle"
+     * at the same time is not supported.
+     *
+     * The possible keys are:
+     * * `horizontal` — Defines the possible horizontal alignment of the FloatingActionButton.
+     *   * `start` — Uses the start point of the container.
+     *   * `center` — Uses the center point of the container.
+     *   * `end` (Default) — Uses the end point of the container
+     * * `vertical` — Defines the possible vertical alignment of the FloatingActionButton.
+     *   * `top` — Uses the top point of the container.
+     *   * `middle` — Uses the middle point of the container.
+     *   * `bottom` (Default) — Uses the bottom point of the container.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton align="bottom end" />
+     * ```
+     */
+    align?: FloatingActionButtonAlign;
+    /**
+     * Specifies the position mode of the Floating Action Button.
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/positioning). It is based on the
+     * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
+     *
+     * * The possible values are:
+     * * 'fixed' (Default)
+     * * 'absolute'
+     *
+     * @default 'fixed'
+     * @example
+     * ```jsx
+     * <FloatingActionButton positionMode="absolute" />
+     * ```
+     */
+    positionMode?: FloatingActionButtonPositionMode;
+    /**
+     * Specifies the size of the FloatingActionButton.
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/appearance).
+     *
+     * The possible values are:
+     * * `small` — Applies half of the default padding, e.g. `8px`.
+     * * `medium` — Applies the default padding, e.g. `16px`.
+     * * `large` — Applies one and one half of the default padding, e.g. `24px`.
+     *
+     * @default undefined (theme-controlled)
+     * @example
+     * ```jsx
+     * <FloatingActionButton size="large" />
+     * ```
+     */
+    size?: FloatingActionButtonSize;
+    /**
+     * Configures the rounding of the Floating Action Button.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `full`
+     *
+     * @default undefined (theme-controlled)
+     * @example
+     * ```jsx
+     * <FloatingActionButton rounded="small" />
+     * ```
+     */
+    rounded?: FloatingActionButtonRounded;
+    /**
+     * Configures the theme color of the FloatingActionButton.
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/appearance).
+     *
+     * The possible values are:
+     * * `primary`&mdash;Applies coloring based on the primary theme color.
+     * * `secondary`&mdash;Applies coloring based on the secondary theme color.
+     * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
+     * * `info`&mdash;Applies coloring based on the info theme color.
+     * * `success`&mdash; Applies coloring based on the success theme color.
+     * * `warning`&mdash; Applies coloring based on the warning theme color.
+     * * `error`&mdash; Applies coloring based on the error theme color.
+     * * `dark`&mdash; Applies coloring based on the dark theme color.
+     * * `light`&mdash; Applies coloring based on the light theme color.
+     * * `inverse`&mdash; Applies coloring based on the inverse theme color.
+     *
+     * @default undefined (theme-controlled)
+     * @example
+     * ```jsx
+     * <FloatingActionButton themeColor="secondary" />
+     * ```
+     */
+    themeColor?: FloatingActionButtonThemeColor;
+    /**
+     * Defines the collection of items rendered in the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton items={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
+     * ```
+     */
+    items?: Array<FloatingActionButtonItemProps>;
+    /**
+     * Overrides the default component responsible for rendering items.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton item={CustomItemComponent} />
+     * ```
+     */
+    item?: React.ComponentType<FloatingActionButtonItemProps>;
+    /**
+     * Configures the popup settings for the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton popupSettings={{ animate: false }} />
+     * ```
+     */
+    popupSettings?: FloatingActionButtonPopupSettings;
+    /**
+     * Sets the `tabIndex` of the main button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `accessKey` of the main button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton accessKey="a" />
+     * ```
+     */
+    accessKey?: string;
+    /**
+     * Enables modal behavior by rendering an overlay under the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton modal />
+     * ```
+     */
+    modal?: boolean;
+    /**
+     * Sets styles for the overlay element when the `modal` prop is enabled.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />
+     * ```
+     */
+    overlayStyle?: React.CSSProperties;
+    /**
+     * Fires when the Floating Action Button is focused.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onFocus={(event) => console.log(event)} />
+     * ```
+     */
+    onFocus?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button is blurred.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onBlur={(event) => console.log(event)} />
+     * ```
+     */
+    onBlur?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button is clicked.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onClick={(event) => console.log(event)} />
+     * ```
+     */
+    onClick?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when a Floating Action Button item is clicked.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onItemClick={(event) => console.log(event)} />
+     * ```
+     */
+    onItemClick?: (event: FloatingActionButtonItemEvent) => void;
+    /**
+     * Fires when a key is pressed while the Floating Action Button is focused.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onKeyDown={(event) => console.log(event)} />
+     * ```
+     */
+    onKeyDown?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the popup which contains the items is opened
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/events).
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onOpen={(event) => console.log(event)} />
+     * ```
+     */
+    onOpen?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the popup containing the items is closed.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onClose={(event) => console.log(event)} />
+     * ```
+     */
+    onClose?: (event: FloatingActionButtonEvent) => void;
+}
+export {};

package/FloatingActionButton/models/align-offset.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the horizontal and vertical offset applied to the Floating Action Button.
+ *
+ * Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
+ *
+ * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
+ * not in a corner, can be moved along the container's boundary or towards the center of the container.
+ *
+ * A negative offset can be used to force a button to overflow the boundaries of its container.
+ */
+export interface FloatingActionButtonAlignOffset {
+    /**
+     * Sets the horizontal offset of the Floating Action Button.
+     */
+    x?: number | string;
+    /**
+     * Sets the vertical offset of the Floating Action Button.
+     */
+    y?: number | string;
+}

package/FloatingActionButton/models/align.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container.
+ *
+ * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
+ * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and
+ * vertical: "middle" at the same time is not supported.
+ */
+export interface FloatingActionButtonAlign {
+    /**
+     * Defines the possible horizontal alignment of the Floating Action Button.
+     *
+     * The available values are:
+     * - `start`—Uses the start point of the container.
+     * - `center`—Uses the center point of the container.
+     * - `end`(Default)—Uses the end point of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end';
+    /**
+     * Defines the possible vertical alignment of the Floating Action Button.
+     *
+     * The available values are:
+     * - `top`—Uses the top point of the container.
+     * - `middle`—Uses the middle point of the container.
+     * - `bottom`(Default)—Uses the bottom point of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom';
+}

package/FloatingActionButton/models/events.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { FloatingActionButtonItemProps } from '../../index.js';
+import { FloatingActionButtonHandle } from '../interfaces/FloatingActionButtonHandle.js';
+/**
+ * Represents the return type of the FloatingActionButton events.
+ */
+export interface FloatingActionButtonEvent extends BaseEvent<FloatingActionButtonHandle> {
+}
+/**
+ * Represents the return type of the FloatingActionButtonItemEvent.
+ */
+export interface FloatingActionButtonItemEvent extends BaseEvent<FloatingActionButtonHandle> {
+    /**
+     * The clicked item props.
+     */
+    itemProps?: FloatingActionButtonItemProps;
+    /**
+     * The zero-based index of the clicked item.
+     */
+    itemIndex: number;
+}

package/FloatingActionButton/models/position-mode.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the position mode of the Floating Action Button. It is based on the
+ * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
+ *
+ * * The possible values are:
+ * * 'absolute' (Default)
+ * * 'fixed'
+ */
+export type FloatingActionButtonPositionMode = 'absolute' | 'fixed';

package/FloatingActionButton/models/rounded.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the rounding of the Floating Action Button.
+ *
+ * The possible values are:
+ * * `small`
+ * * `medium`
+ * * `large`
+ * * `full`
+ * * `null`—Does not set a rounded `className`.
+ *
+ */
+export type FloatingActionButtonRounded = 'small' | 'medium' | 'large' | 'full';

package/FloatingActionButton/models/size.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the size of the FloatingActionButton.
+ *
+ * The possible values are:
+ * * `small`—Applies half of the default padding, e.g. `8px`.
+ * * `medium` (Default)—Applies the default padding, e.g. `16px`.
+ * * `large`—Applies one and one half of the default padding, e.g. `24px`.
+ * * `null`—Does not set a size `className`.
+ *
+ */
+export type FloatingActionButtonSize = 'small' | 'medium' | 'large';

package/FloatingActionButton/models/theme-color.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the theme color of the Floating Action Button..
+ *
+ * The possible values are:
+ * * `primary` (Default)—Applies coloring based on the primary theme color.
+ * * `secondary`—Applies coloring based on the secondary theme color.
+ * * `tertiary`— Applies coloring based on the tertiary theme color.
+ * * `info`—Applies coloring based on the info theme color.
+ * * `success`— Applies coloring based on the success theme color.
+ * * `warning`— Applies coloring based on the warning theme color.
+ * * `error`— Applies coloring based on the error theme color.
+ * * `dark`— Applies coloring based on the dark theme color.
+ * * `light`— Applies coloring based on the light theme color.
+ * * `inverse`— Applies coloring based on the inverse theme color.
+ * * `null`—Does not set a theme color `className`.
+ *
+ */
+export type FloatingActionButtonThemeColor = null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

package/FloatingActionButton/utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Align } from '@progress/kendo-react-popup';
+import { FloatingActionButtonAlignOffset } from './models/align-offset.js';
+import { FloatingActionButtonAlign } from './models/align.js';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_OFFSET = "16px";
+/**
+ * @hidden
+ */
+export declare const toStringValues: (val: number | string) => string;
+/**
+ * @hidden
+ */
+export declare const getAnchorAlign: (fabAlign: FloatingActionButtonAlign, rtl?: boolean) => Align;
+/**
+ * @hidden
+ */
+export declare const getPopupAlign: (fabAlign: FloatingActionButtonAlign, rtl: boolean) => Align;
+/**
+ * @hidden
+ */
+export declare const getTextDirectionClass: (rtl: string, hAlign: any) => any;
+/**
+ * @hidden
+ */
+export declare const position: (ref: any, align: FloatingActionButtonAlign, alignOffset: FloatingActionButtonAlignOffset | undefined, isRtl: boolean) => void;

package/ListButton/ButtonItem.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ButtonsClassStructure } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * The props of the ButtonItem component.
+ * The ButtonItem component renders each list item in the dropdown buttons list.
+ */
+export interface ButtonItemProps {
+    /**
+     * Determines whether the item is focused.
+     */
+    focused?: boolean;
+    /**
+     * The index of the item in the items list.
+     */
+    index?: number;
+    /**
+     * A function that is fired when the item is clicked.
+     */
+    onClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, index?: number) => void;
+    /**
+     * A function that is fired when the mouse or pointer is pressed down on the item.
+     */
+    onDown?: (event: React.PointerEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    /**
+     * A React component for rendering the item.
+     */
+    item?: null | React.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    /**
+     * A function or React component for rendering the item. The default rendering includes an icon, an image, and text.
+     */
+    render?: ((li: React.ReactElement<HTMLLIElement>, props: ButtonItemProps) => React.ReactNode) | React.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    /**
+     * The data item represented by this button item.
+     */
+    dataItem: any;
+    /**
+     * The id attribute of the item.
+     */
+    id?: string;
+    /**
+     * The field of the data item that provides the text content of the item.
+     */
+    textField?: string;
+    /**
+     * One or more CSS classes that will be added to the item element.
+     */
+    className?: string;
+    /**
+     * Internal property for the unstyled rendering variant of the component.
+     */
+    unstyled?: ButtonsClassStructure;
+}
+/**
+ * @hidden
+ */
+export declare const ButtonItem: {
+    (props: ButtonItemProps): any;
+    displayName: string;
+};