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

package/src/colors/Picker.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

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

@@ -1,13 +0,0 @@
-/**
- * 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

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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,35 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,170 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,21 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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

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

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