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

package/colors/interfaces/ColorPickerBlurEvent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onBlur` ColorPicker event.
+ */
+export interface ColorPickerBlurEvent {
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}

package/colors/interfaces/ColorPickerChangeEvent.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 { ColorPickerHandle } from '../ColorPicker.js';
+/**
+ * The arguments for the `onChange` ColorPicker event.
+ */
+export interface ColorPickerChangeEvent {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+    /**
+     * The event target.
+     */
+    target: ColorPickerHandle;
+}

package/colors/interfaces/ColorPickerFocusEvent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` ColorPicker event.
+ */
+export interface ColorPickerFocusEvent {
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}

package/colors/interfaces/ColorPickerGradientSettings.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The settings of the ColorGradient that is nested inside the popup of the ColorPicker
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/custom#toc-customizing-the-gradient-popup)).
+ */
+export interface ColorPickerGradientSettings {
+    /**
+     * Specifies if the component will render an alpha slider.
+     * Defaults to `true`.
+     */
+    opacity?: boolean;
+    /**
+     * Enables the color contrast tool.
+     * Sets the background color that will be compared to the selected value.
+     * The tool will calculate the contrast ratio between two colors.
+     * Currently, only the RGBA format is supported.
+     */
+    backgroundColor?: string;
+    /**
+     * @hidden
+     */
+    _adaptive?: boolean;
+}

package/colors/interfaces/ColorPickerPaletteSettings.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TileSize } from '../models/tile-size.js';
+/**
+ * The settings of the ColorPalette that is nested inside the popup of the ColorPicker
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/custom#toc-customizing-the-palette-popup)).
+ */
+export interface ColorPickerPaletteSettings {
+    /**
+     * Specifies the set of colors.
+     * Provides a set of predefined palette presets (for example, `office`, `basic`, and `apex`)
+     * and enables you to implement a custom color palette.
+     * Defaults to the `office` preset.
+     *
+     * The supported values are:
+     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
+     * * A string with comma-separated colors.
+     * * A string array.
+     */
+    palette?: string | Array<string>;
+    /**
+     * Specifies the number of columns that will be displayed.
+     * Defaults to `10`.
+     */
+    columns?: number;
+    /**
+     * Specifies the size of a color cell.
+     *
+     * The possible values are:
+     * * (Default) `24`
+     * * `{ width: number, height: number }`
+     */
+    tileSize?: number | TileSize;
+}

package/colors/interfaces/ColorPickerPopupSettings.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupAnimation } from '@progress/kendo-react-popup';
+/**
+ * The settings of the popup container of the ColorPicker.
+ */
+export interface ColorPickerPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     */
+    className?: string | Array<string>;
+}

package/colors/interfaces/ColorPickerProps.d.ts

@@ -0,0 +1,242 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorPickerBlurEvent } from './ColorPickerBlurEvent.js';
+import { ColorPickerFocusEvent } from './ColorPickerFocusEvent.js';
+import { ColorPickerChangeEvent } from './ColorPickerChangeEvent.js';
+import { ColorPickerActiveColorClick } from './ColorPickerActiveColorClick.js';
+import { ColorPickerPopupSettings } from './ColorPickerPopupSettings.js';
+import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings.js';
+import { ColorPickerGradientSettings } from './ColorPickerGradientSettings.js';
+import { ColorPickerView } from './ColorPickerView.js';
+import { SVGIcon } from '@progress/kendo-react-common';
+import { FlatColorPickerProps } from '../FlatColorPicker.js';
+/**
+ * Represents the props of the [KendoReact ColorPicker component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker).
+ */
+export interface ColorPickerProps {
+    /**
+     * The default value of the ColorPicker
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/default-value)).
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker defaultValue="#ff0000" />
+     * ```
+     */
+    defaultValue?: string;
+    /**
+     * Specifies the value of the ColorPicker. Currently, only the RGBA format is supported.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker value="rgba(255, 0, 0, 1)" />
+     * ```
+     */
+    value?: string;
+    /**
+     * Overrides the validity state of the component.
+     * If `valid` is set, the `required` property will be ignored.
+     *
+     * This property is part of the [FormComponentProps](https://www.telerik.com/kendo-react-ui/components/common/api/formcomponentprops) interface.
+     */
+    valid?: boolean;
+    /**
+     * Sets the disabled state of the ColorPicker
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/disabled)).
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `tabIndex` property of the ColorPicker.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `title` property of the ColorPicker.
+     */
+    title?: string;
+    /**
+     * **Deprecated**. Use `views` prop instead.
+     *
+     * @deprecated
+     */
+    view?: ColorPickerView;
+    /**
+     * Specifies the views that will be rendered in the popup. By default both the gradient and palette views will be rendered.
+     *
+     * @default ['gradient', 'palette']`
+     */
+    views?: ColorPickerView[];
+    /**
+     * Sets the initially active view in the popup when both 'gradient' and 'palette' views are rendered.
+     * Use with the `views` property.
+     *
+     * @default 'gradient''
+     */
+    activeView?: ColorPickerView;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Defines the name of an [existing icon in the KendoReact theme](https://www.telerik.com/kendo-react-ui/components/styling/icons).
+     * You have to provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
+     * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools`
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/custom#displaying-custom-icons)).
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * The class name which displays an icon in the ColorPicker button
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/custom#toc-displaying-custom-icons)).
+     */
+    iconClassName?: string;
+    /**
+     * Configures the ColorGradient that is displayed in the ColorPicker popup
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/custom#toc-customizing-the-gradient-popup)).
+     */
+    gradientSettings?: ColorPickerGradientSettings;
+    /**
+     * Configures the ColorPalette that is displayed in the ColorPicker popup
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/custom#toc-customizing-the-palette-popup)).
+     */
+    paletteSettings?: ColorPickerPaletteSettings;
+    /**
+     * Configures the FlatColorPicker that is displayed in the ColorPicker popup via `views` property.
+     */
+    flatColorPickerSettings?: FlatColorPickerProps;
+    /**
+     * Configures the popup of the ColorPicker.
+     */
+    popupSettings?: ColorPickerPopupSettings;
+    /**
+     * Sets the open and close state of the ColorPicker.
+     */
+    open?: boolean;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorPickerChangeEvent) => void;
+    /**
+     * The event handler that will be fired when ColorPicker is focused.
+     */
+    onFocus?: (event: ColorPickerFocusEvent) => void;
+    /**
+     * The event handler that will be fired when ColorPicker is blurred.
+     */
+    onBlur?: (event: ColorPickerBlurEvent) => void;
+    /**
+     * The event handler that will be fired when the left side of the ColorPicker is clicked.
+     */
+    onActiveColorClick?: (event: ColorPickerActiveColorClick) => void;
+    /**
+     * Configures the `size` of the ColorPicker.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the ColorPicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <ColorPicker rounded="full" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the ColorPicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Sets additional classes to the ColorPicker.
+     */
+    className?: string;
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptive={true} />
+     * ```
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptiveTitle="Adaptive Popup Title" />
+     * ```
+     */
+    adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptiveSubtitle="Adaptive Popup Subtitle" />
+     * ```
+     */
+    adaptiveSubtitle?: string;
+}

package/colors/interfaces/ColorPickerView.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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 view which the ColorPicker will render in the popup
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/views)).
+ *
+ * The possible values are:
+ * * `palette`
+ * * `gradient`
+ * * **Deprecated** `combo`
+ */
+export type ColorPickerView = 'gradient' | 'palette' | 'combo';

package/colors/interfaces/PickerPopupSettings.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 { PopupAnimation } from '@progress/kendo-react-popup';
+/**
+ * @hidden
+ */
+export interface PickerPopupSettings {
+    /**
+     * @hidden
+     */
+    id: string | undefined;
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     */
+    className?: string | Array<string>;
+    /**
+     * The styles that are passed to the popup element.
+     */
+    style?: React.CSSProperties;
+}

package/colors/interfaces/PickerProps.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PickerPopupSettings } from './PickerPopupSettings.js';
+/**
+ * @hidden
+ */
+export interface PickerProps {
+    /**
+     * The popup settings.
+     */
+    popupSettings: PickerPopupSettings;
+    /**
+     * The rendered input element.
+     */
+    input?: any;
+    /**
+     * The rendered button element.
+     */
+    button?: any;
+    /**
+     * The content of the popup.
+     */
+    content?: any;
+    /**
+     * The `direction` CSS property of the popup content.
+     */
+    dir?: string;
+    /**
+     * The open state of the popup.
+     */
+    open: boolean;
+    /**
+     * Specifies the element which will be used as an anchor for the popup. The popup opens next to that element.
+     */
+    popupAnchor?: HTMLElement;
+    /**
+     * @hidden
+     */
+    onOpen?: () => void;
+    /**
+     * @hidden
+     */
+    onClose?: () => void;
+    /**
+     * @hidden
+     */
+    _mobileMode?: boolean;
+    /**
+     * @hidden
+     */
+    _actionSheet?: any;
+}

package/colors/models/hsva.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface HSVA {
+    h?: number;
+    s?: number;
+    v?: number;
+    a?: number;
+}

package/colors/models/output-format.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 type OutputFormat = 'hex' | 'rgba';

package/colors/models/palette-presets.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @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 PALETTEPRESETS: {
+    basic: {
+        colors: string[];
+        columns: number;
+    };
+    office: {
+        colors: string[];
+        columns: number;
+    };
+    apex: {
+        colors: string[];
+        columns: number;
+    };
+    austin: {
+        colors: string[];
+        columns: number;
+    };
+    clarity: {
+        colors: string[];
+        columns: number;
+    };
+    slipstream: {
+        colors: string[];
+        columns: number;
+    };
+    metro: {
+        colors: string[];
+        columns: number;
+    };
+    flow: {
+        colors: string[];
+        columns: number;
+    };
+    hardcover: {
+        colors: string[];
+        columns: number;
+    };
+    trek: {
+        colors: string[];
+        columns: number;
+    };
+    verve: {
+        colors: string[];
+        columns: number;
+    };
+    monochrome: {
+        colors: string[];
+        columns: number;
+    };
+};

package/colors/models/rgb.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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 interface RGB {
+    r?: number;
+    g?: number;
+    b?: number;
+}

package/colors/models/rgba.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface RGBA {
+    r?: number;
+    g?: number;
+    b?: number;
+    a?: number;
+}

package/colors/models/table-cell.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @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 interface TableCell {
+    row: number;
+    col: number;
+}

package/colors/models/tile-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 a color cell.
+ *
+ * The possible values are:
+ * * (Default) `number = 24`
+ * * `{ width: number, height: number }`
+ */
+export type TileSize = {
+    width: number;
+    height: number;
+};