@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/src/colors/Picker.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { Popup, Align } from '@progress/kendo-react-popup';
+import { classNames } from '@progress/kendo-react-common';
+import { PickerProps } from './interfaces/PickerProps';
+
+/**
+ * @hidden
+ */
+const ANCHOR_VERTICAL_ALIGN: 'bottom' = 'bottom';
+/**
+ * @hidden
+ */
+const POPUP_VERTICAL_ALIGN: 'top' = 'top';
+
+/**
+ * @hidden
+ */
+export const Picker: React.FunctionComponent<PickerProps> = (props: PickerProps) => {
+    const popupSettings = props.popupSettings || {};
+    const horizontalAlign: 'right' | 'left' = props.dir === 'rtl' ? 'right' : 'left';
+
+    const anchorAlign: Align = React.useMemo(
+        () => ({ horizontal: horizontalAlign, vertical: ANCHOR_VERTICAL_ALIGN }),
+        [horizontalAlign]
+    );
+    const popupAlign: Align = React.useMemo(
+        () => ({ horizontal: horizontalAlign, vertical: POPUP_VERTICAL_ALIGN }),
+        [horizontalAlign]
+    );
+
+    return (
+      <>
+        {props.input}
+        {props.button}
+        <Popup
+          style={{
+                    ...(popupSettings || {}).style,
+                    direction: props.dir as any
+                }}
+          {...popupSettings}
+          anchor={props.popupAnchor}
+          anchorAlign={anchorAlign}
+          popupAlign={popupAlign}
+          show={props.open}
+          onOpen={props.onOpen}
+          onClose={props.onClose}
+          className={classNames('k-reset', popupSettings.className)}
+            >
+          {props.content}
+        </Popup>
+      </>
+    );
+};
+
+Picker.displayName = 'KendoPickerComponent';

package/src/colors/interfaces/ColorGradientChangeEvent.ts

@@ -0,0 +1,12 @@
+import { BaseEvent } from '@progress/kendo-react-common';
+import { ColorGradient } from '../ColorGradient';
+
+/**
+ * The arguments for the `onChange` ColorGradient event.
+ */
+export interface ColorGradientChangeEvent extends BaseEvent<ColorGradient> {
+    /**
+     * The current value of the ColorGradient.
+     */
+    value: string;
+}

package/src/colors/interfaces/ColorGradientProps.ts

@@ -0,0 +1,77 @@
+import { ColorGradientChangeEvent } from './ColorGradientChangeEvent';
+
+/**
+ * Represents the props of the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
+ */
+export interface ColorGradientProps {
+    /**
+     * The default value of the ColorGradient.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the ColorGradient.
+     */
+    value?: string;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorGradientChangeEvent) => void;
+    /**
+     * Represents the focus event.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Determines whether the alpha slider and the alpha input will be displayed. 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;
+    /**
+     * Determines whether the ColorGradient is disabled
+     * ([more information and example]({% slug disabled_colorgradient %})).
+     *
+     * @example
+     * ```jsx
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *           <ColorGradient disabled={true} />
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * The styles that are applied to the ColorGradient.
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * Sets the `tabIndex` property of the ColorGradient.
+     */
+    tabIndex?: number;
+
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+
+    /* eslint-disable max-len */
+    /**
+     * 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;
+    // tslint:enable:max-line-length
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+}

package/src/colors/interfaces/ColorPaletteChangeEvent.ts

@@ -0,0 +1,16 @@
+import { BaseEvent } from '@progress/kendo-react-common';
+import { ColorPalette } from '../ColorPalette';
+
+/**
+ * The arguments for the `onChange` ColorPalette event.
+ */
+export interface ColorPaletteChangeEvent extends BaseEvent<ColorPalette> {
+    /**
+     * The current value of the ColorPalette.
+     */
+    value: string;
+    /**
+     * The current value of the ColorPalette in RGBA format.
+     */
+    rgbaValue: string;
+}

package/src/colors/interfaces/ColorPaletteProps.ts

@@ -0,0 +1,78 @@
+import { TileSize } from '../models/tile-size';
+import { ColorPaletteChangeEvent } from './ColorPaletteChangeEvent';
+
+/**
+ * Represents the props of the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
+ */
+export interface ColorPaletteProps {
+    /**
+     * The color palette that will be displayed.
+     *
+     * The supported values are:
+     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
+     * * A string array.
+     */
+    palette?: string[] | string;
+    /**
+     * Specifies the number of columns that will be displayed.
+     * Defaults to `10`.
+     */
+    columns?: number;
+    /**
+     * Specifies the size of a color cell in px.
+     * Defaults to `24`.
+     */
+    tileSize?: number | TileSize;
+    /**
+     * The default value of the ColorPalette.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the ColorPalette.
+     */
+    value?: string;
+    /**
+     * Determines whether the ColorPalette is disabled
+     * ([more information and example]({% slug disabled_colorpalette %})).
+     *
+     * @example
+     * ```jsx
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *           <ColorPalette disabled={true} />
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `tabIndex` property of the ColorPalette.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /* eslint-disable max-len */
+    /**
+     * 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;
+    // tslint:enable:max-line-length
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorPaletteChangeEvent) => void;
+    /**
+     * Represent the focus event of the ColorPalette.
+     */
+    onFocus?: (event: FocusEvent) => void;
+}

package/src/colors/interfaces/ColorPickerActiveColorClick.ts

@@ -0,0 +1,17 @@
+/**
+ * The arguments for the `onActiveColorClick` ColorPicker event.
+ */
+export interface ColorPickerActiveColorClick {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}

package/src/colors/interfaces/ColorPickerBlurEvent.ts

@@ -0,0 +1,13 @@
+/**
+ * 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/src/colors/interfaces/ColorPickerChangeEvent.ts

@@ -0,0 +1,17 @@
+/**
+ * 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;
+}

package/src/colors/interfaces/ColorPickerFocusEvent.ts

@@ -0,0 +1,13 @@
+/**
+ * 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/src/colors/interfaces/ColorPickerGradientSettings.ts

@@ -0,0 +1,19 @@
+/**
+ * The settings of the ColorGradient that is nested inside the popup of the ColorPicker
+ * ([see example]({% slug customizecolorpicker_colorpicker %}#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;
+}

package/src/colors/interfaces/ColorPickerPaletteSettings.ts

@@ -0,0 +1,35 @@
+import { TileSize } from '../models/tile-size';
+
+/**
+ * The settings of the ColorPalette that is nested inside the popup of the ColorPicker
+ * ([see example]({% slug customizecolorpicker_colorpicker %}#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/src/colors/interfaces/ColorPickerPopupSettings.ts

@@ -0,0 +1,16 @@
+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/src/colors/interfaces/ColorPickerProps.ts

@@ -0,0 +1,170 @@
+import { ColorPickerBlurEvent } from './ColorPickerBlurEvent';
+import { ColorPickerFocusEvent } from './ColorPickerFocusEvent';
+import { ColorPickerChangeEvent } from './ColorPickerChangeEvent';
+import { ColorPickerActiveColorClick } from './ColorPickerActiveColorClick';
+import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
+import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
+import { ColorPickerGradientSettings } from './ColorPickerGradientSettings';
+import { ColorPickerView } from './ColorPickerView';
+
+/**
+ * Represents the props of the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
+ */
+export interface ColorPickerProps {
+    /**
+     * The default value of the ColorPicker
+     * ([see example]({% slug default_value_colorpicker %})).
+     */
+    defaultValue?: string;
+
+    /**
+     * Specifies the value of the ColorPicker. Currently, only the RGBA format is supported.
+     */
+    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]({% slug api_common_formcomponentprops %}) interface.
+     */
+    valid?: boolean;
+
+    /**
+     * Sets the disabled state of the ColorPicker
+     * ([see example]({% slug disabled_colorpicker %})).
+     */
+    disabled?: boolean;
+
+    /**
+     * Sets the `tabIndex` property of the ColorPicker.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+
+    /**
+     * Sets the `title` property of the ColorPicker.
+     */
+    title?: string;
+
+    /**
+     * Sets the view which the ColorPicker will render in the popup
+     * ([see example]({% slug combinedview_colorpicker %})).
+     */
+    view?: ColorPickerView;
+
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+
+    /**
+     * Defines the name of an [existing icon in the KendoReact theme]({% slug 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]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
+     */
+    icon?: string;
+
+    /**
+     * The class name which displays an icon in the ColorPicker button
+     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).
+     */
+    iconClassName?: string;
+
+    /**
+     * Configures the ColorGradient that is displayed in the ColorPicker popup
+     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-gradient-popup)).
+     */
+    gradientSettings?: ColorPickerGradientSettings;
+
+    /**
+     * Configures the ColorPalette that is displayed in the ColorPicker popup
+     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
+     */
+    paletteSettings?: ColorPickerPaletteSettings;
+
+    /**
+     * 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;
+
+    /* eslint-disable max-len */
+    /**
+     * 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;
+    // tslint:enable:max-line-length
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: 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
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the ColorPicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the ColorPicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+}

package/src/colors/interfaces/ColorPickerView.ts

@@ -0,0 +1,10 @@
+/**
+ * Specifies the view which the ColorPicker will render in the popup
+ * ([see example]({% slug combinedview_colorpicker %})).
+ *
+ * The possible values are:
+ * * (Default) `palette`
+ * * `gradient`
+ * * `combo`
+ */
+export type ColorPickerView = 'gradient' | 'palette' | 'combo';

package/src/colors/interfaces/PickerPopupSettings.ts

@@ -0,0 +1,21 @@
+import { PopupAnimation } from '@progress/kendo-react-popup';
+
+/**
+ * @hidden
+ */
+export interface PickerPopupSettings {
+    /**
+     * 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/src/colors/interfaces/PickerProps.ts

@@ -0,0 +1,51 @@
+import { PickerPopupSettings } from './PickerPopupSettings';
+
+/**
+ * @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;
+}

package/src/colors/models/hsva.ts

@@ -0,0 +1,9 @@
+/**
+ * @hidden
+ */
+export interface HSVA {
+    h?: number;
+    s?: number;
+    v?: number;
+    a?: number;
+}

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

@@ -0,0 +1,4 @@
+/**
+ * @hidden
+ */
+export type OutputFormat = 'hex' | 'rgba';