@progress/kendo-react-inputs 8.2.0-develop.29 → 8.2.0-develop.30

package/index.d.mts

@@ -237,29 +237,26 @@ export declare interface ColorGradientHandle extends Pick<ColorGradientWithoutCo
  */
 export declare interface ColorGradientProps {
     /**
-     * The default value of the ColorGradient.
-     */
-    defaultValue?: string;
-    /**
-     * The value of the ColorGradient.
+     * 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.
      */
-    value?: string;
+    ariaDescribedBy?: string;
     /**
-     * @hidden
+     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
      */
-    role?: string;
+    ariaLabelHSV?: string;
     /**
-     * Determines the event handler that will be fired when the user edits the value.
+     * Represent the label of the component.
      */
-    onChange?: (event: ColorGradientChangeEvent) => void;
+    ariaLabel?: string;
     /**
-     * Represents the focus event.
+     * Identifies the element(s) which will label the component.
      */
-    onFocus?: (event: any) => void;
+    ariaLabelledBy?: string;
     /**
-     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
+     * Represents the text rendered inside the `hsv` drag handle.
      */
-    opacity?: boolean;
+    ariaValueText?: string;
     /**
      * Enables the color contrast tool.
      * Sets the background color that will be compared to the selected value.
@@ -267,6 +264,14 @@ export declare interface ColorGradientProps {
      * Currently, only the RGBA format is supported.
      */
     backgroundColor?: string;
+    /**
+     * Sets additional classes to the ColorGradient.
+     */
+    className?: string;
+    /**
+     * The default value of the ColorGradient.
+     */
+    defaultValue?: string;
     /**
      * Determines whether the ColorGradient is disabled
      * ([more information and example]({% slug disabled_colorgradient %})).
@@ -285,48 +290,61 @@ export declare interface ColorGradientProps {
      */
     disabled?: boolean;
     /**
-     * The styles that are applied to the ColorGradient.
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
      */
-    style?: React.CSSProperties;
+    format?: 'rgba' | 'rgb' | 'hex';
     /**
-     * Sets the `tabIndex` property of the ColorGradient.
+     * Determines the step (in pixels) when moving the gradient drag handle using
+     * the keyboard arrow keys while holding the shift key.
+     *
+     * @default 2
      */
-    tabIndex?: number;
+    gradientSliderSmallStep?: number;
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle
+     * using the keyboard arrow keys.
+     *
+     * @default 5
+     */
+    gradientSliderStep?: number;
     /**
      * 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.
+     * @hidden
      */
-    ariaDescribedBy?: string;
+    isInsidePopup?: boolean;
     /**
-     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
+     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
      */
-    ariaLabelHSV?: string;
+    opacity?: boolean;
     /**
-     * Represent the label of the component.
+     * @hidden
      */
-    ariaLabel?: string;
+    role?: string;
     /**
-     * Identifies the element(s) which will label the component.
+     * The styles that are applied to the ColorGradient.
      */
-    ariaLabelledBy?: string;
+    style?: React.CSSProperties;
     /**
-     * Represents the text rendered inside the `hsv` drag handle.
+     * Sets the `tabIndex` property of the ColorGradient.
      */
-    ariaValueText?: string;
+    tabIndex?: number;
     /**
-     * Sets the default input format in the gradient input editor.
-     *
-     * @default 'rgb'
+     * The value of the ColorGradient.
      */
-    format?: 'rgba' | 'rgb' | 'hex';
+    value?: string;
     /**
-     * Sets additional classes to the ColorGradient.
+     * Determines the event handler that will be fired when the user edits the value.
      */
-    className?: string;
+    onChange?: (event: ColorGradientChangeEvent) => void;
+    /**
+     * Represents the focus event.
+     */
+    onFocus?: (event: any) => void;
 }
 
 /**
@@ -383,9 +401,15 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
     /**
      * @hidden
      */
-    wrapper: HTMLDivElement | null;
+    wrapperRef: React_2.RefObject<HTMLDivElement>;
+    /**
+     * @hidden
+     */
+    hsvGradientRef: React_2.RefObject<HTMLDivElement>;
     private gradientWrapper;
     private alphaSlider;
+    private navigation?;
+    private hsvNavigation?;
     constructor(props: ColorGradientProps);
     /**
      * @hidden
@@ -408,6 +432,10 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     componentDidUpdate(_: ColorGradientProps, prevState: ColorGradientState): void;
+    /**
+     * @hidden
+     */
+    focus: () => void;
     /**
      * @hidden
      */
@@ -436,6 +464,14 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     onGradientWrapperClick: (event: React_2.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onHsvGradientKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onHsvGradientValueChange: (element: HTMLElement, moveX: number, moveY: number) => void;
     /**
      * @hidden
      */
@@ -444,6 +480,10 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     changePosition: (event: any) => void;
+    /**
+     * @hidden
+     */
+    moveDragHandle(positionX: number, positionY: number): void;
     /**
      * @hidden
      */
@@ -477,14 +517,11 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     getGradientRectMetrics(): ClientRect;
-    /**
-     * @hidden
-     */
-    focus: () => void;
     /**
      * @hidden
      */
     render(): JSX_2.Element;
+    private onKeyDown;
 }
 
 /**
@@ -686,7 +723,7 @@ export declare class ColorPaletteWithoutContext extends React_2.Component<ColorP
     /**
      * @hidden
      */
-    wrapper: HTMLDivElement | null;
+    wrapperRef: React_2.RefObject<HTMLDivElement>;
     private paletteService;
     private get guid();
     constructor(props: ColorPaletteProps);

package/index.d.ts

@@ -237,29 +237,26 @@ export declare interface ColorGradientHandle extends Pick<ColorGradientWithoutCo
  */
 export declare interface ColorGradientProps {
     /**
-     * The default value of the ColorGradient.
-     */
-    defaultValue?: string;
-    /**
-     * The value of the ColorGradient.
+     * 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.
      */
-    value?: string;
+    ariaDescribedBy?: string;
     /**
-     * @hidden
+     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
      */
-    role?: string;
+    ariaLabelHSV?: string;
     /**
-     * Determines the event handler that will be fired when the user edits the value.
+     * Represent the label of the component.
      */
-    onChange?: (event: ColorGradientChangeEvent) => void;
+    ariaLabel?: string;
     /**
-     * Represents the focus event.
+     * Identifies the element(s) which will label the component.
      */
-    onFocus?: (event: any) => void;
+    ariaLabelledBy?: string;
     /**
-     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
+     * Represents the text rendered inside the `hsv` drag handle.
      */
-    opacity?: boolean;
+    ariaValueText?: string;
     /**
      * Enables the color contrast tool.
      * Sets the background color that will be compared to the selected value.
@@ -267,6 +264,14 @@ export declare interface ColorGradientProps {
      * Currently, only the RGBA format is supported.
      */
     backgroundColor?: string;
+    /**
+     * Sets additional classes to the ColorGradient.
+     */
+    className?: string;
+    /**
+     * The default value of the ColorGradient.
+     */
+    defaultValue?: string;
     /**
      * Determines whether the ColorGradient is disabled
      * ([more information and example]({% slug disabled_colorgradient %})).
@@ -285,48 +290,61 @@ export declare interface ColorGradientProps {
      */
     disabled?: boolean;
     /**
-     * The styles that are applied to the ColorGradient.
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
      */
-    style?: React.CSSProperties;
+    format?: 'rgba' | 'rgb' | 'hex';
     /**
-     * Sets the `tabIndex` property of the ColorGradient.
+     * Determines the step (in pixels) when moving the gradient drag handle using
+     * the keyboard arrow keys while holding the shift key.
+     *
+     * @default 2
      */
-    tabIndex?: number;
+    gradientSliderSmallStep?: number;
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle
+     * using the keyboard arrow keys.
+     *
+     * @default 5
+     */
+    gradientSliderStep?: number;
     /**
      * 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.
+     * @hidden
      */
-    ariaDescribedBy?: string;
+    isInsidePopup?: boolean;
     /**
-     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
+     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
      */
-    ariaLabelHSV?: string;
+    opacity?: boolean;
     /**
-     * Represent the label of the component.
+     * @hidden
      */
-    ariaLabel?: string;
+    role?: string;
     /**
-     * Identifies the element(s) which will label the component.
+     * The styles that are applied to the ColorGradient.
      */
-    ariaLabelledBy?: string;
+    style?: React.CSSProperties;
     /**
-     * Represents the text rendered inside the `hsv` drag handle.
+     * Sets the `tabIndex` property of the ColorGradient.
      */
-    ariaValueText?: string;
+    tabIndex?: number;
     /**
-     * Sets the default input format in the gradient input editor.
-     *
-     * @default 'rgb'
+     * The value of the ColorGradient.
      */
-    format?: 'rgba' | 'rgb' | 'hex';
+    value?: string;
     /**
-     * Sets additional classes to the ColorGradient.
+     * Determines the event handler that will be fired when the user edits the value.
      */
-    className?: string;
+    onChange?: (event: ColorGradientChangeEvent) => void;
+    /**
+     * Represents the focus event.
+     */
+    onFocus?: (event: any) => void;
 }
 
 /**
@@ -383,9 +401,15 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
     /**
      * @hidden
      */
-    wrapper: HTMLDivElement | null;
+    wrapperRef: React_2.RefObject<HTMLDivElement>;
+    /**
+     * @hidden
+     */
+    hsvGradientRef: React_2.RefObject<HTMLDivElement>;
     private gradientWrapper;
     private alphaSlider;
+    private navigation?;
+    private hsvNavigation?;
     constructor(props: ColorGradientProps);
     /**
      * @hidden
@@ -408,6 +432,10 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     componentDidUpdate(_: ColorGradientProps, prevState: ColorGradientState): void;
+    /**
+     * @hidden
+     */
+    focus: () => void;
     /**
      * @hidden
      */
@@ -436,6 +464,14 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     onGradientWrapperClick: (event: React_2.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onHsvGradientKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onHsvGradientValueChange: (element: HTMLElement, moveX: number, moveY: number) => void;
     /**
      * @hidden
      */
@@ -444,6 +480,10 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     changePosition: (event: any) => void;
+    /**
+     * @hidden
+     */
+    moveDragHandle(positionX: number, positionY: number): void;
     /**
      * @hidden
      */
@@ -477,14 +517,11 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
      * @hidden
      */
     getGradientRectMetrics(): ClientRect;
-    /**
-     * @hidden
-     */
-    focus: () => void;
     /**
      * @hidden
      */
     render(): JSX_2.Element;
+    private onKeyDown;
 }
 
 /**
@@ -686,7 +723,7 @@ export declare class ColorPaletteWithoutContext extends React_2.Component<ColorP
     /**
      * @hidden
      */
-    wrapper: HTMLDivElement | null;
+    wrapperRef: React_2.RefObject<HTMLDivElement>;
     private paletteService;
     private get guid();
     constructor(props: ColorPaletteProps);

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-inputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1722455423,
+  publishDate: 1722491453,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "8.2.0-develop.29",
+  "version": "8.2.0-develop.30",
   "description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,13 +25,13 @@
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "8.2.0-develop.29",
-    "@progress/kendo-react-buttons": "8.2.0-develop.29",
-    "@progress/kendo-react-common": "8.2.0-develop.29",
-    "@progress/kendo-react-dialogs": "8.2.0-develop.29",
-    "@progress/kendo-react-intl": "8.2.0-develop.29",
-    "@progress/kendo-react-labels": "8.2.0-develop.29",
-    "@progress/kendo-react-popup": "8.2.0-develop.29",
+    "@progress/kendo-react-animation": "8.2.0-develop.30",
+    "@progress/kendo-react-buttons": "8.2.0-develop.30",
+    "@progress/kendo-react-common": "8.2.0-develop.30",
+    "@progress/kendo-react-dialogs": "8.2.0-develop.30",
+    "@progress/kendo-react-intl": "8.2.0-develop.30",
+    "@progress/kendo-react-labels": "8.2.0-develop.30",
+    "@progress/kendo-react-popup": "8.2.0-develop.30",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"