@progress/kendo-react-inputs 6.1.1-dev.202311151536 → 7.0.0-develop.1

package/dist/es/colors/ColorPalette.d.ts

@@ -1,123 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { ColorPaletteProps } from './interfaces/ColorPaletteProps';
-/**
- * @hidden
- */
-export declare const DEFAULT_TILE_SIZE = 24;
-/**
- * @hidden
- */
-export declare const DEFAULT_COLUMNS_COUNT = 10;
-/**
- * @hidden
- */
-export declare const DEFAULT_PRESET = "office";
-/**
- * @hidden
- */
-export interface ColorPaletteState {
-    selectedColor?: string;
-    focusedColor?: string;
-    isFirstRender: boolean;
-}
-/** @hidden */
-export declare class ColorPaletteWithoutContext extends React.Component<ColorPaletteProps, ColorPaletteState> {
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        palette: PropTypes.Requireable<NonNullable<string | string[] | null | undefined>>;
-        columns: PropTypes.Requireable<number>;
-        tileSize: PropTypes.Requireable<any>;
-        defaultValue: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        tabIndex: PropTypes.Requireable<number>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        id: PropTypes.Requireable<string>;
-        ariaLabelledBy: PropTypes.Requireable<string>;
-        ariaDescribedBy: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        palette: string;
-        tileSize: number;
-    };
-    /**
-     * @hidden
-     */
-    wrapper: HTMLDivElement | null;
-    private paletteService;
-    private guid;
-    constructor(props: ColorPaletteProps);
-    /**
-     * @hidden
-     */
-    focus: () => void;
-    /**
-     * @hidden
-     */
-    render(): "" | JSX.Element;
-    /**
-     * @hidden
-     */
-    static getDerivedStateFromProps(props: ColorPaletteProps, state: ColorPaletteState): {
-        selectedColor: undefined;
-        isFirstRender?: undefined;
-    } | {
-        selectedColor: string;
-        isFirstRender?: undefined;
-    } | {
-        isFirstRender: boolean;
-        selectedColor?: undefined;
-    } | null;
-    private onKeyDown;
-    private onColorClick;
-    private onFocus;
-    private onBlur;
-    private handleCellNavigation;
-    private handleEnter;
-    private dispatchChangeEvent;
-    private get focusedColorCooridanates();
-    private get isUncontrolled();
-    private getPaletteInfo;
-    private renderRows;
-    private renderColumns;
-    private createCellId;
-}
-/**
- * Represents the PropsContext of the `ColorPalette` component.
- * Used for global configuration of all `ColorPalette` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export declare const ColorPalettePropsContext: React.Context<(p: ColorPaletteProps) => ColorPaletteProps>;
-/**
- * Represent the `ref` of the ColorPalette component.
- */
-export interface ColorPaletteHandle extends Pick<ColorPaletteWithoutContext, keyof ColorPaletteWithoutContext> {
-}
-/** @hidden */
-export declare type ColorPalette = ColorPaletteHandle;
-/**
- * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
- *
- * Accepts properties of type [ColorPaletteProps]({% slug api_inputs_colorpaletteprops %}).
- * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}).
- *
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPalette palette='basic' />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare const ColorPalette: React.ForwardRefExoticComponent<ColorPaletteProps & React.RefAttributes<any>>;

package/dist/es/colors/ColorPalette.js

@@ -1,280 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { ColorPaletteService } from './utils/color-palette.service';
-import { classNames, Keys, dispatchEvent, guid, getTabIndex, withPropsContext, createPropsContext } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { PALETTEPRESETS } from './models/palette-presets';
-import { isPresent } from './utils/misc';
-import { parseColor } from './utils/color-parser';
-/**
- * @hidden
- */
-export var DEFAULT_TILE_SIZE = 24;
-/**
- * @hidden
- */
-export var DEFAULT_COLUMNS_COUNT = 10;
-/**
- * @hidden
- */
-export var DEFAULT_PRESET = 'office';
-/** @hidden */
-var ColorPaletteWithoutContext = /** @class */ (function (_super) {
-    __extends(ColorPaletteWithoutContext, _super);
-    function ColorPaletteWithoutContext(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.wrapper = null;
-        _this.paletteService = null;
-        _this.guid = guid();
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this.wrapper) {
-                _this.wrapper.focus();
-            }
-        };
-        _this.onKeyDown = function (event) {
-            switch (event.keyCode) {
-                case Keys.down:
-                    _this.handleCellNavigation(0, 1);
-                    break;
-                case Keys.up:
-                    _this.handleCellNavigation(0, -1);
-                    break;
-                case Keys.right:
-                    _this.handleCellNavigation(1, 0);
-                    break;
-                case Keys.left:
-                    _this.handleCellNavigation(-1, 0);
-                    break;
-                case Keys.enter:
-                    _this.handleEnter(event);
-                    break;
-                default: return;
-            }
-            event.preventDefault();
-        };
-        _this.onColorClick = function (color, event) {
-            if (_this.isUncontrolled) {
-                _this.setState({ selectedColor: color, focusedColor: color });
-            }
-            else {
-                _this.setState({ focusedColor: color });
-            }
-            _this.dispatchChangeEvent(color, event);
-        };
-        _this.onFocus = function (nativeEvent) {
-            if (!_this.paletteService) {
-                return;
-            }
-            _this.setState({ focusedColor: _this.state.selectedColor || _this.paletteService.colorRows[0][0] });
-            if (_this.props.onFocus) {
-                _this.props.onFocus.call(undefined, nativeEvent);
-            }
-        };
-        _this.onBlur = function () {
-            _this.setState({ focusedColor: undefined });
-        };
-        validatePackage(packageMetadata);
-        // The empty string for the `value` prop means no selection but controlled mode.
-        _this.state = {
-            selectedColor: _this.props.value !== undefined ? _this.props.value : _this.props.defaultValue,
-            isFirstRender: true
-        };
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    ColorPaletteWithoutContext.prototype.render = function () {
-        var _this = this;
-        var paletteInfo = this.getPaletteInfo();
-        var svc = this.paletteService = new ColorPaletteService();
-        svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
-        var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
-        var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
-        var className = classNames('k-colorpalette', { 'k-disabled': this.props.disabled }, this.props.className);
-        if (paletteInfo.colors.length) {
-            return (React.createElement("div", { id: this.props.id, role: "grid", className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? 'true' : undefined), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
-                React.createElement("table", { className: "k-colorpalette-table", role: "presentation" },
-                    React.createElement("tbody", { role: "rowgroup" }, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords)))));
-        }
-        else {
-            // In this way, the code prevents an eventual focus of the component when no cells are available.
-            // This is needed because upon focus the first cell gets focused.
-            return '';
-        }
-    };
-    /**
-     * @hidden
-     */
-    ColorPaletteWithoutContext.getDerivedStateFromProps = function (props, state) {
-        if (!state.isFirstRender && props.value !== undefined) {
-            // The component is in controlled mode.
-            if (props.value === '' && state.selectedColor !== undefined) {
-                // The selection has to be removed.
-                return { selectedColor: undefined };
-            }
-            else if (props.value !== '' && props.value !== state.selectedColor) {
-                return { selectedColor: props.value };
-            }
-        }
-        else if (state.isFirstRender) {
-            return { isFirstRender: false };
-        }
-        return null;
-    };
-    ColorPaletteWithoutContext.prototype.handleCellNavigation = function (horizontalStep, verticalStep) {
-        if (!this.paletteService) {
-            return;
-        }
-        if (this.focusedColorCooridanates) {
-            var newCoords = this.paletteService.getNextCell(this.focusedColorCooridanates, horizontalStep, verticalStep);
-            this.setState({ focusedColor: this.paletteService.getColorAt(newCoords) });
-        }
-        else {
-            this.setState({ focusedColor: this.paletteService.colorRows[0][0] });
-        }
-    };
-    ColorPaletteWithoutContext.prototype.handleEnter = function (event) {
-        if (this.isUncontrolled) {
-            this.setState({ selectedColor: this.state.focusedColor });
-        }
-        this.dispatchChangeEvent(this.state.focusedColor, event);
-    };
-    ColorPaletteWithoutContext.prototype.dispatchChangeEvent = function (value, event) {
-        dispatchEvent(this.props.onChange, event, this, { value: value, rgbaValue: parseColor(value, 'rgba') });
-    };
-    Object.defineProperty(ColorPaletteWithoutContext.prototype, "focusedColorCooridanates", {
-        get: function () {
-            return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : undefined;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ColorPaletteWithoutContext.prototype, "isUncontrolled", {
-        get: function () {
-            return this.props.value === undefined;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ColorPaletteWithoutContext.prototype.getPaletteInfo = function () {
-        if (typeof this.props.palette === 'string') {
-            var preset = PALETTEPRESETS[this.props.palette];
-            if (isPresent(preset)) {
-                return {
-                    colors: preset.colors,
-                    columns: this.props.columns || preset.columns || DEFAULT_COLUMNS_COUNT
-                };
-            }
-            else {
-                return { colors: [], columns: 0 };
-            }
-        }
-        else {
-            return { colors: this.props.palette || [], columns: this.props.columns || DEFAULT_COLUMNS_COUNT };
-        }
-    };
-    ColorPaletteWithoutContext.prototype.renderRows = function (rows, selectedCellCoords, focusedCellCoords) {
-        var _this = this;
-        return rows.map(function (row, i) {
-            return React.createElement("tr", { role: "row", key: i }, _this.renderColumns(row, i, selectedCellCoords, focusedCellCoords));
-        });
-    };
-    ColorPaletteWithoutContext.prototype.renderColumns = function (columns, rowIndex, selectedCellCoords, focusedCellCoords) {
-        var _this = this;
-        var rowIsSelected = selectedCellCoords !== undefined && selectedCellCoords.row === rowIndex;
-        var selectedColumn = selectedCellCoords && selectedCellCoords.col;
-        var rowIsFocused = focusedCellCoords !== undefined && focusedCellCoords.row === rowIndex;
-        var focusedColumn = focusedCellCoords && focusedCellCoords.col;
-        var tileSize = typeof this.props.tileSize !== 'number' ?
-            this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize };
-        var width = tileSize.width + 'px';
-        var height = tileSize.height + 'px';
-        return columns.map(function (color, i) {
-            var isSelected = rowIsSelected && selectedColumn === i;
-            var className = classNames('k-colorpalette-tile', {
-                'k-selected': isSelected,
-                'k-focus': rowIsFocused && focusedColumn === i
-            });
-            return (React.createElement("td", { role: "gridcell", className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
-        });
-    };
-    ColorPaletteWithoutContext.prototype.createCellId = function (cellCoords) {
-        return "".concat(this.guid, "_").concat(cellCoords.row, "_").concat(cellCoords.col);
-    };
-    ColorPaletteWithoutContext.displayName = 'ColorPalette';
-    /**
-     * @hidden
-     */
-    ColorPaletteWithoutContext.propTypes = {
-        palette: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.string]),
-        columns: PropTypes.number,
-        tileSize: PropTypes.any,
-        defaultValue: PropTypes.string,
-        value: PropTypes.string,
-        disabled: PropTypes.bool,
-        tabIndex: PropTypes.number,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        id: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string,
-        className: PropTypes.string
-    };
-    /**
-     * @hidden
-     */
-    ColorPaletteWithoutContext.defaultProps = {
-        palette: DEFAULT_PRESET,
-        tileSize: DEFAULT_TILE_SIZE
-    };
-    return ColorPaletteWithoutContext;
-}(React.Component));
-export { ColorPaletteWithoutContext };
-/**
- * Represents the PropsContext of the `ColorPalette` component.
- * Used for global configuration of all `ColorPalette` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export var ColorPalettePropsContext = createPropsContext();
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
- *
- * Accepts properties of type [ColorPaletteProps]({% slug api_inputs_colorpaletteprops %}).
- * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}).
- *
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPalette palette='basic' />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var ColorPalette = withPropsContext(ColorPalettePropsContext, ColorPaletteWithoutContext);
-ColorPalette.displayName = 'KendoReactColorPalette';

package/dist/es/colors/ColorPicker.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ColorPickerProps } from './interfaces/ColorPickerProps';
-/**
- * @hidden
- */
-export interface ColorPickerHandle {
-    element: HTMLSpanElement | null;
-    value?: string;
-}
-/**
- * Represents the PropsContext of the `ColorPicker` component.
- * Used for global configuration of all `ColorPicker` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export declare const ColorPickerPropsContext: React.Context<(p: ColorPickerProps) => ColorPickerProps>;
-/**
- * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPicker />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerHandle | null>>;

package/dist/es/colors/ColorPicker.js

@@ -1,246 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps, svgIconPropType, IconWrap } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { Picker } from './Picker';
-import { ColorGradient } from './ColorGradient';
-import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
-import { Button } from '@progress/kendo-react-buttons';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
-import { messages, colorPickerDropdownButtonAriaLabel } from '../messages';
-import { useLocalization } from '@progress/kendo-react-intl';
-/**
- * @hidden
- */
-var DEFAULT_GRADIENT_SETTINGS = {
-    opacity: true
-};
-/**
- * @hidden
- */
-var DEFAULT_PALETTE_SETTINGS = {
-    palette: DEFAULT_PRESET,
-    tileSize: DEFAULT_TILE_SIZE
-};
-/**
- * @hidden
- */
-var isControlled = function (prop) {
-    return prop !== undefined;
-};
-/**
- * Represents the PropsContext of the `ColorPicker` component.
- * Used for global configuration of all `ColorPicker` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export var ColorPickerPropsContext = createPropsContext();
-/**
- * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPicker />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var ColorPicker = React.forwardRef(function (directProps, target) {
-    var _a;
-    validatePackage(packageMetadata);
-    var props = usePropsContext(ColorPickerPropsContext, directProps);
-    var localization = useLocalization();
-    var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick, className = props.className;
-    var focusableElementRef = React.useRef(null);
-    var gradientRef = React.useRef(null);
-    var paletteRef = React.useRef(null);
-    var blurTimeoutRef = React.useRef();
-    var buttonRef = React.useRef(null);
-    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
-    var _f = React.useState(props.defaultValue), stateValue = _f[0], setStateValue = _f[1];
-    var _g = React.useState(false), stateOpen = _g[0], setStateOpen = _g[1];
-    var isValueControlled = isControlled(props.value);
-    var isOpenControlled = isControlled(props.open);
-    var value = isValueControlled ? props.value : stateValue;
-    var open = isOpenControlled ? props.open : stateOpen;
-    var focusElement = React.useCallback(function () {
-        if (focusableElementRef.current) {
-            focusableElementRef.current.focus();
-        }
-    }, []);
-    React.useImperativeHandle(target, function () { return ({
-        // we agreed that each element will have focus method exposed
-        element: focusableElementRef.current,
-        actionElement: buttonRef.current,
-        value: value,
-        focus: focusElement
-    }); }, [value, focusElement]);
-    var setOpen = React.useCallback(function (nextOpen, isBlur) {
-        if (!isOpenControlled) {
-            if (!nextOpen && !isBlur && focusableElementRef && focusableElementRef.current) {
-                focusableElementRef.current.focus();
-            }
-            setStateOpen(nextOpen);
-        }
-    }, [isOpenControlled]);
-    var onKeyDownHandler = React.useCallback(function (event) {
-        var altKey = event.altKey, keyCode = event.keyCode;
-        if (keyCode === Keys.esc) {
-            setOpen(false);
-            return;
-        }
-        if (keyCode === Keys.enter && !isOpenControlled) {
-            event.preventDefault();
-            event.stopPropagation();
-            setOpen(!open);
-            return;
-        }
-        if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (keyCode === Keys.up && focusableElementRef && focusableElementRef.current) {
-                focusableElementRef.current.focus();
-                setOpen(false);
-            }
-            if (keyCode === Keys.down) {
-                setOpen(true);
-            }
-        }
-    }, [open, isOpenControlled]);
-    var onOpenHandler = React.useCallback(function () {
-        // Skip content autofocus when in controlled mode
-        if (!isOpenControlled) {
-            if (gradientRef.current) {
-                gradientRef.current.focus();
-            }
-            else if (paletteRef.current) {
-                paletteRef.current.focus();
-            }
-        }
-    }, [isOpenControlled]);
-    var onClickHandler = React.useCallback(function () {
-        setOpen(!open, true);
-    }, [open]);
-    var onActiveColorClickHandler = React.useCallback(function (event) {
-        if (onActiveColorClick) {
-            onActiveColorClick.call(undefined, {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                value: value
-            });
-        }
-    }, [onActiveColorClick, value]);
-    var onFocusHandler = React.useCallback(function (event) {
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-            blurTimeoutRef.current = undefined;
-            // case where moving back to input from popup
-            // if (event.target === focusableElementRef.current) {
-            // setOpen(false); // in this case we should focus input on keydown
-            // }
-        }
-        else {
-            setFocused(true);
-        }
-        if (onFocus) {
-            onFocus.call(undefined, {
-                nativeEvent: event.nativeEvent,
-                syntheticEvent: event
-            });
-        }
-    }, [onFocus]);
-    var onBlurTimeout = React.useCallback(function () {
-        setOpen(false, true);
-        setFocused(false);
-        blurTimeoutRef.current = undefined;
-    }, []);
-    var onBlurHandler = React.useCallback(function (event) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = window.setTimeout(onBlurTimeout);
-        if (onBlur) {
-            onBlur.call(undefined, {
-                nativeEvent: event.nativeEvent,
-                syntheticEvent: event
-            });
-        }
-    }, [onBlur]);
-    var onChangeHandler = React.useCallback(function (event, isPalette) {
-        var currentValue = isPalette ? event.rgbaValue : event.value;
-        if (!isValueControlled) {
-            setStateValue(currentValue);
-        }
-        if (isPalette) {
-            setOpen(false);
-        }
-        if (onChange) {
-            onChange.call(undefined, {
-                value: currentValue,
-                nativeEvent: event.nativeEvent,
-                syntheticEvent: event.syntheticEvent
-            });
-        }
-    }, [isValueControlled, onChange]);
-    var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
-    var dir = useDir(focusableElementRef, props.dir);
-    var isValid = valid !== false;
-    return (React.createElement("span", { id: props.id, role: 'combobox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-haspopup": 'dialog', "aria-expanded": open, "aria-disabled": disabled ? 'true' : undefined, className: classNames('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
-            _a["k-picker-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a["k-picker-".concat(fillMode)] = fillMode,
-            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
-            _a['k-invalid'] = !isValid,
-            _a['k-disabled'] = disabled,
-            _a['k-focus'] = focused,
-            _a.className = className,
-            _a)), ref: focusableElementRef, tabIndex: getTabIndex(tabIndex, disabled), title: props.title, onKeyDown: onKeyDownHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, dir: dir },
-        React.createElement(Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-input-inner' },
-                React.createElement("span", { className: classNames('k-value-icon', 'k-color-preview', {
-                        'k-no-color': !value,
-                        'k-icon-color-preview': (icon || svgIcon || iconClassName)
-                    }) },
-                    iconClassName && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName) }),
-                    !iconClassName && (icon || svgIcon) && React.createElement(IconWrap, { name: icon, icon: svgIcon }),
-                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', svgIcon: caretAltDownIcon, "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
-                (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
-                (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
-});
-ColorPicker.propTypes = {
-    value: PropTypes.string,
-    defaultValue: PropTypes.string,
-    disabled: PropTypes.bool,
-    view: PropTypes.oneOf(['gradient', 'palette', 'combo']),
-    dir: PropTypes.string,
-    id: PropTypes.string,
-    icon: PropTypes.string,
-    svgIcon: svgIconPropType,
-    ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string,
-    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
-    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']),
-    className: PropTypes.string
-};
-var defaultProps = {
-    size: 'medium',
-    rounded: 'medium',
-    fillMode: 'solid',
-    view: 'palette',
-    gradientSettings: DEFAULT_GRADIENT_SETTINGS,
-    paletteSettings: DEFAULT_PALETTE_SETTINGS
-};
-ColorPicker.defaultProps = defaultProps;
-ColorPicker.displayName = 'KendoColorPicker';