@progress/kendo-react-inputs 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

package/dist/npm/colors/ColorGradient.js

@@ -35,16 +35,20 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
     __extends(ColorGradientWithoutContext, _super);
     function ColorGradientWithoutContext(props) {
         var _this = _super.call(this, props) || this;
+        /**
+         * @hidden
+         */
+        _this.wrapper = null;
         /**
          * @hidden
          */
         _this.onHexChange = function (hex, value, event) {
             if (_this.isUncontrolled) {
-                var hsva = color_parser_1.getHSV(value);
-                _this.setState({ hsva: hsva, backgroundColor: color_parser_1.getColorFromHue(hsva.h), rgba: color_parser_1.getRGBA(value), hex: hex });
+                var hsva = (0, color_parser_1.getHSV)(value);
+                _this.setState({ hsva: hsva, backgroundColor: (0, color_parser_1.getColorFromHue)(hsva.h), rgba: (0, color_parser_1.getRGBA)(value), hex: hex });
             }
             else {
-                color_cache_1.cacheHex(_this.state.guid, value, hex);
+                (0, color_cache_1.cacheHex)(_this.state.guid, value, hex);
             }
             _this.dispatchChangeEvent(value, event, event.nativeEvent);
         };
@@ -52,14 +56,14 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.onRgbaChange = function (rgba, event) {
-            var value = color_parser_1.getColorFromRGBA(rgba);
+            var value = (0, color_parser_1.getColorFromRGBA)(rgba);
             if (_this.isUncontrolled) {
-                var hsva = color_parser_1.getHSV(value);
-                var hex = color_parser_1.parseColor(value, 'hex');
-                _this.setState({ hsva: hsva, backgroundColor: color_parser_1.getColorFromHue(hsva.h), rgba: rgba, hex: hex });
+                var hsva = (0, color_parser_1.getHSV)(value);
+                var hex = (0, color_parser_1.parseColor)(value, 'hex');
+                _this.setState({ hsva: hsva, backgroundColor: (0, color_parser_1.getColorFromHue)(hsva.h), rgba: rgba, hex: hex });
             }
             else {
-                color_cache_1.cacheRgba(_this.state.guid, value, rgba);
+                (0, color_cache_1.cacheRgba)(_this.state.guid, value, rgba);
             }
             _this.dispatchChangeEvent(value, event.syntheticEvent, event.nativeEvent);
         };
@@ -101,8 +105,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             var gradientRectMetrics = _this.getGradientRectMetrics();
             var deltaX = event.clientX - gradientRectMetrics.left;
             var deltaY = event.clientY - gradientRectMetrics.top;
-            var left = misc_1.fitIntoBounds(deltaX, 0, gradientRectMetrics.width);
-            var top = misc_1.fitIntoBounds(deltaY, 0, gradientRectMetrics.height);
+            var left = (0, misc_1.fitIntoBounds)(deltaX, 0, gradientRectMetrics.width);
+            var top = (0, misc_1.fitIntoBounds)(deltaY, 0, gradientRectMetrics.height);
             var hsva = Object.assign({}, _this.state.hsva, { s: left / gradientRectMetrics.width, v: 1 - top / gradientRectMetrics.height });
             _this.handleHsvaChange(hsva, event, event.nativeEvent);
         };
@@ -118,11 +122,11 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.focus = function () {
-            kendo_react_common_1.focusFirstFocusableChild(_this.wrapper);
+            (0, kendo_react_common_1.focusFirstFocusableChild)(_this.wrapper);
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-        var value = props.value || props.defaultValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
-        _this.state = Object.assign({}, ColorGradientWithoutContext.getStateFromValue(value), { isFirstRender: true, guid: kendo_react_common_1.guid() });
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+        var value = props.value || props.defaultValue || (0, color_parser_1.parseColor)(DEFAULT_SELECTED_COLOR, FORMAT);
+        _this.state = Object.assign({}, ColorGradientWithoutContext.getStateFromValue(value), { isFirstRender: true, guid: (0, kendo_react_common_1.guid)() });
         return _this;
     }
     /**
@@ -148,7 +152,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.prototype.componentWillUnmount = function () {
-        color_cache_1.removeCachedColor(this.state.guid);
+        (0, color_cache_1.removeCachedColor)(this.state.guid);
     };
     /**
      * @hidden
@@ -167,8 +171,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             var gradientRectMetrics = this.getGradientRectMetrics();
             var top_1 = (1 - this.state.hsva.v) * gradientRectMetrics.height;
             var left = this.state.hsva.s * gradientRectMetrics.width;
-            style.top = top_1 + "px";
-            style.left = left + "px";
+            style.top = "".concat(top_1, "px");
+            style.left = "".concat(left, "px");
         }
         return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
     };
@@ -176,13 +180,13 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.prototype.handleHsvaChange = function (hsva, syntheticEvent, nativeEvent) {
-        var value = color_parser_1.getColorFromHSV(hsva);
+        var value = (0, color_parser_1.getColorFromHSV)(hsva);
         if (this.isUncontrolled) {
-            var hex = color_parser_1.parseColor(value, 'hex');
-            this.setState({ hsva: hsva, backgroundColor: color_parser_1.getColorFromHue(hsva.h), rgba: color_parser_1.getRGBA(value), hex: hex });
+            var hex = (0, color_parser_1.parseColor)(value, 'hex');
+            this.setState({ hsva: hsva, backgroundColor: (0, color_parser_1.getColorFromHue)(hsva.h), rgba: (0, color_parser_1.getRGBA)(value), hex: hex });
         }
         else {
-            color_cache_1.cacheHsva(this.state.guid, value, hsva);
+            (0, color_cache_1.cacheHsva)(this.state.guid, value, hsva);
         }
         this.dispatchChangeEvent(value, syntheticEvent, nativeEvent);
     };
@@ -198,14 +202,14 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.getStateFromValue = function (value, componentGuid) {
-        if (!misc_1.isPresent(color_parser_1.parseColor(value, 'hex'))) {
+        if (!(0, misc_1.isPresent)((0, color_parser_1.parseColor)(value, 'hex'))) {
             // Validate/sanitize the input.
             value = DEFAULT_SELECTED_COLOR;
         }
-        var hsva = color_cache_1.getCachedHsva(componentGuid, value) || color_parser_1.getHSV(value);
-        var rgba = color_cache_1.getCachedRgba(componentGuid, value) || color_parser_1.getRGBA(value);
-        var hex = color_cache_1.getCachedHex(componentGuid, value) || color_parser_1.parseColor(value, 'hex');
-        var backgroundColor = color_parser_1.getColorFromHue(hsva.h);
+        var hsva = (0, color_cache_1.getCachedHsva)(componentGuid, value) || (0, color_parser_1.getHSV)(value);
+        var rgba = (0, color_cache_1.getCachedRgba)(componentGuid, value) || (0, color_parser_1.getRGBA)(value);
+        var hex = (0, color_cache_1.getCachedHex)(componentGuid, value) || (0, color_parser_1.parseColor)(value, 'hex');
+        var backgroundColor = (0, color_parser_1.getColorFromHue)(hsva.h);
         return { hsva: hsva, backgroundColor: backgroundColor, rgba: rgba, hex: hex };
     };
     /**
@@ -213,7 +217,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.prototype.setAlphaSliderBackground = function (backgroundColor) {
         if (this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
-            this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, " + backgroundColor + ")";
+            this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, ".concat(backgroundColor, ")");
         }
     };
     Object.defineProperty(ColorGradientWithoutContext.prototype, "isUncontrolled", {
@@ -237,8 +241,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.prototype.render = function () {
         var _this = this;
-        var className = kendo_react_common_1.classNames('k-colorgradient', { 'k-disabled': this.props.disabled });
-        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
+        var className = (0, kendo_react_common_1.classNames)('k-colorgradient', { 'k-disabled': this.props.disabled });
+        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(kendo_react_common_1.Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
@@ -248,9 +252,9 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                 React.createElement("div", { className: "k-hsv-controls k-hstack" },
                     React.createElement(main_1.Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled }),
                     this.props.opacity &&
-                        React.createElement(main_1.Slider, { value: misc_1.isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
+                        React.createElement(main_1.Slider, { value: (0, misc_1.isPresent)(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
             React.createElement(ColorInput_1.default, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
-            this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: color_parser_1.getRGBA(this.props.backgroundColor), rgba: this.state.rgba }))));
+            this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: (0, color_parser_1.getRGBA)(this.props.backgroundColor), rgba: this.state.rgba }))));
     };
     ColorGradientWithoutContext.displayName = 'ColorGradient';
     /**
@@ -284,7 +288,7 @@ exports.ColorGradientWithoutContext = ColorGradientWithoutContext;
  *
  * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
  */
-exports.ColorGradientPropsContext = kendo_react_common_1.createPropsContext();
+exports.ColorGradientPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
 /**
  * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
@@ -302,5 +306,5 @@ exports.ColorGradientPropsContext = kendo_react_common_1.createPropsContext();
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-exports.ColorGradient = kendo_react_common_1.withPropsContext(exports.ColorGradientPropsContext, ColorGradientWithoutContext);
+exports.ColorGradient = (0, kendo_react_common_1.withPropsContext)(exports.ColorGradientPropsContext, ColorGradientWithoutContext);
 exports.ColorGradient.displayName = 'KendoReactColorGradient';

package/dist/npm/colors/ColorInput.js

@@ -62,7 +62,7 @@ var ColorInput = /** @class */ (function (_super) {
         return _this;
     }
     ColorInput.prototype.render = function () {
-        var localizationService = kendo_react_intl_1.provideLocalizationService(this);
+        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var hexMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientHex]);
         var rMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientR]);
         var gMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientG]);
@@ -123,5 +123,5 @@ var ColorInput = /** @class */ (function (_super) {
     return ColorInput;
 }(React.Component));
 exports.default = ColorInput;
-kendo_react_intl_1.registerForIntl(ColorInput);
-kendo_react_intl_1.registerForLocalization(ColorInput);
+(0, kendo_react_intl_1.registerForIntl)(ColorInput);
+(0, kendo_react_intl_1.registerForLocalization)(ColorInput);

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

@@ -67,12 +67,15 @@ export declare class ColorPaletteWithoutContext extends React.Component<ColorPal
      * @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;

package/dist/npm/colors/ColorPalette.js

@@ -46,7 +46,8 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.wrapper = null;
-        _this.guid = kendo_react_common_1.guid();
+        _this.paletteService = null;
+        _this.guid = (0, kendo_react_common_1.guid)();
         /**
          * @hidden
          */
@@ -86,15 +87,18 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
             _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: nativeEvent, target: _this });
+                _this.props.onFocus.call(undefined, nativeEvent);
             }
         };
         _this.onBlur = function () {
             _this.setState({ focusedColor: undefined });
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.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,
@@ -112,9 +116,9 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
         var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
         var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
-        var className = kendo_react_common_1.classNames('k-colorpalette', { 'k-disabled': this.props.disabled });
+        var className = (0, kendo_react_common_1.classNames)('k-colorpalette', { 'k-disabled': this.props.disabled });
         if (paletteInfo.colors.length) {
-            return (React.createElement("div", { id: this.props.id, className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
+            return (React.createElement("div", { id: this.props.id, className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
                 React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
                     React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
                         React.createElement("tbody", null, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
@@ -145,6 +149,9 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         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) });
@@ -160,11 +167,11 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         this.dispatchChangeEvent(this.state.focusedColor, event);
     };
     ColorPaletteWithoutContext.prototype.dispatchChangeEvent = function (value, event) {
-        kendo_react_common_1.dispatchEvent(this.props.onChange, event, this, { value: value, rgbaValue: color_parser_1.parseColor(value, 'rgba') });
+        (0, kendo_react_common_1.dispatchEvent)(this.props.onChange, event, this, { value: value, rgbaValue: (0, color_parser_1.parseColor)(value, 'rgba') });
     };
     Object.defineProperty(ColorPaletteWithoutContext.prototype, "focusedColorCooridanates", {
         get: function () {
-            return this.state.focusedColor ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : undefined;
+            return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : undefined;
         },
         enumerable: false,
         configurable: true
@@ -179,7 +186,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
     ColorPaletteWithoutContext.prototype.getPaletteInfo = function () {
         if (typeof this.props.palette === 'string') {
             var preset = palette_presets_1.PALETTEPRESETS[this.props.palette];
-            if (misc_1.isPresent(preset)) {
+            if ((0, misc_1.isPresent)(preset)) {
                 return {
                     colors: preset.colors,
                     columns: this.props.columns || preset.columns || exports.DEFAULT_COLUMNS_COUNT
@@ -211,7 +218,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         var height = tileSize.height + 'px';
         return columns.map(function (color, i) {
             var isSelected = rowIsSelected && selectedColumn === i;
-            var className = kendo_react_common_1.classNames('k-colorpalette-tile', {
+            var className = (0, kendo_react_common_1.classNames)('k-colorpalette-tile', {
                 'k-selected': isSelected,
                 'k-focus': rowIsFocused && focusedColumn === i
             });
@@ -219,7 +226,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         });
     };
     ColorPaletteWithoutContext.prototype.createCellId = function (cellCoords) {
-        return this.guid + "_" + cellCoords.row + "_" + cellCoords.col;
+        return "".concat(this.guid, "_").concat(cellCoords.row, "_").concat(cellCoords.col);
     };
     ColorPaletteWithoutContext.displayName = 'ColorPalette';
     /**
@@ -255,7 +262,7 @@ exports.ColorPaletteWithoutContext = ColorPaletteWithoutContext;
  *
  * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
  */
-exports.ColorPalettePropsContext = kendo_react_common_1.createPropsContext();
+exports.ColorPalettePropsContext = (0, kendo_react_common_1.createPropsContext)();
 /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
 /**
  * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
@@ -272,5 +279,5 @@ exports.ColorPalettePropsContext = kendo_react_common_1.createPropsContext();
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-exports.ColorPalette = kendo_react_common_1.withPropsContext(exports.ColorPalettePropsContext, ColorPaletteWithoutContext);
+exports.ColorPalette = (0, kendo_react_common_1.withPropsContext)(exports.ColorPalettePropsContext, ColorPaletteWithoutContext);
 exports.ColorPalette.displayName = 'KendoReactColorPalette';

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

@@ -26,4 +26,4 @@ export declare const ColorPickerPropsContext: React.Context<(p: ColorPickerProps
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerHandle>>;
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerHandle | null>>;

package/dist/npm/colors/ColorPicker.js

@@ -48,7 +48,7 @@ var isControlled = function (prop) {
  *
  * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
  */
-exports.ColorPickerPropsContext = kendo_react_common_1.createPropsContext();
+exports.ColorPickerPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /**
  * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
  *
@@ -64,9 +64,9 @@ exports.ColorPickerPropsContext = kendo_react_common_1.createPropsContext();
  */
 exports.ColorPicker = React.forwardRef(function (directProps, target) {
     var _a, _b;
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    var props = kendo_react_common_1.usePropsContext(exports.ColorPickerPropsContext, directProps);
-    var localization = kendo_react_intl_1.useLocalization();
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+    var props = (0, kendo_react_common_1.usePropsContext)(exports.ColorPickerPropsContext, directProps);
+    var localization = (0, kendo_react_intl_1.useLocalization)();
     var _c = props.size, size = _c === void 0 ? defaultProps.size : _c, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.fillMode, fillMode = _e === void 0 ? defaultProps.fillMode : _e, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
     var focusableElementRef = React.useRef(null);
     var gradientRef = React.useRef(null);
@@ -197,23 +197,23 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
         }
     }, [isValueControlled, onChange]);
     var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
-    var dir = kendo_react_common_1.useDir(focusableElementRef, props.dir);
+    var dir = (0, kendo_react_common_1.useDir)(focusableElementRef, props.dir);
     var isValid = valid !== false;
-    return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: kendo_react_common_1.classNames('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
-            _a["k-picker-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a["k-picker-" + fillMode] = fillMode,
-            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+    return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: (0, kendo_react_common_1.classNames)('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
+            _a["k-picker-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-picker-".concat(fillMode)] = fillMode,
+            _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a['k-invalid'] = !isValid,
             _a['k-disabled'] = disabled,
             _a['k-focus'] = focused,
-            _a)), ref: focusableElementRef, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), title: props.title, onKeyDown: onKeyDownHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, dir: dir },
+            _a)), ref: focusableElementRef, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), title: props.title, onKeyDown: onKeyDownHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, dir: dir },
         React.createElement(Picker_1.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: kendo_react_common_1.classNames('k-value-icon', 'k-color-preview', {
+                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-value-icon', 'k-color-preview', {
                         'k-no-color': !value,
                         'k-icon-color-preview': (icon || iconClassName)
                     }) },
-                    (iconClassName || icon) && React.createElement("span", { className: kendo_react_common_1.classNames('k-color-preview-icon', iconClassName, (_b = {},
-                            _b["k-icon k-i-" + icon] = (icon && !iconClassName),
+                    (iconClassName || icon) && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-color-preview-icon', iconClassName, (_b = {},
+                            _b["k-icon k-i-".concat(icon)] = (icon && !iconClassName),
                             _b)) }),
                     React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'arrow-s', "aria-label": localization.toLanguageString(messages_1.colorPickerDropdownButtonAriaLabel, messages_1.messages[messages_1.colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
                 (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient_1.ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),

package/dist/npm/colors/FlatColorPicker.d.ts

@@ -68,4 +68,4 @@ export interface FlatColorPickerHandle {
 /**
  * Represents the FlatColorPicker component.
  */
-export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle>>;
+export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle | null>>;

package/dist/npm/colors/FlatColorPicker.js

@@ -14,7 +14,7 @@ var messages_1 = require("../messages");
  * Represents the FlatColorPicker component.
  */
 exports.FlatColorPicker = React.forwardRef(function (props, ref) {
-    kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var flatColorPickerRef = React.useRef(null);
     var colorGradientRef = React.useRef(null);
@@ -60,33 +60,34 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
     var handleFlatColorPickerBlur = React.useCallback(function () {
         setPrevColor(colorValue);
     }, [colorValue]);
-    return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), className: kendo_react_common_1.classNames('k-flatcolorpicker k-coloreditor', {
+    return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-flatcolorpicker k-coloreditor', {
             'k-disabled': props.disabled
         }, props.className), onBlur: handleFlatColorPickerBlur },
-        props.header ||
-            React.createElement("div", { className: "k-coloreditor-header k-hstack" },
-                React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
-                    React.createElement(kendo_react_buttons_1.ButtonGroup, null,
-                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
-                            React.createElement("span", { className: "k-icon k-i-color-canvas" })),
-                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
-                            React.createElement("span", { className: "k-icon k-i-palette" })))),
-                React.createElement("div", { className: "k-spacer" }),
-                React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
-                    (props.showClearButton && defaultProps.showClearButton) &&
-                        React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
-                            React.createElement("span", { className: "k-icon k-i-reset-color" })),
-                    (props.showPreview && defaultProps.showPreview) &&
-                        React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
-                            React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
-                            React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
-        React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
-            ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
-            : React.createElement(main_1.ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
-        (props.showButtons && defaultProps.showButtons) &&
-            React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
-                React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages_1.messages[messages_1.flatColorPickerCancelBtn]),
-                React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-apply k-primary", onClick: handleApplyBtnClick }, messages_1.messages[messages_1.flatColorPickerApplyBtn]))));
+        React.createElement(React.Fragment, null,
+            props.header ||
+                React.createElement("div", { className: "k-coloreditor-header k-hstack" },
+                    React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
+                        React.createElement(kendo_react_buttons_1.ButtonGroup, null,
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
+                                React.createElement("span", { className: "k-icon k-i-color-canvas" })),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
+                                React.createElement("span", { className: "k-icon k-i-palette" })))),
+                    React.createElement("div", { className: "k-spacer" }),
+                    React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
+                        (props.showClearButton && defaultProps.showClearButton) &&
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
+                                React.createElement("span", { className: "k-icon k-i-reset-color" })),
+                        (props.showPreview && defaultProps.showPreview) &&
+                            React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
+                                React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
+                                React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
+            React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
+                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                : React.createElement(main_1.ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
+            (props.showButtons && defaultProps.showButtons) &&
+                React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
+                    React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages_1.messages[messages_1.flatColorPickerCancelBtn]),
+                    React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-apply k-primary", onClick: handleApplyBtnClick }, messages_1.messages[messages_1.flatColorPickerApplyBtn])))));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/npm/colors/HexInput.d.ts

@@ -23,7 +23,7 @@ export default class HexInput extends React.Component<HexInputProps, HexInputSta
     static getDerivedStateFromProps(props: HexInputProps, state: HexInputState): {
         hex: string;
         originalHex: string;
-    };
+    } | null;
     private onChange;
     private onBlur;
 }

package/dist/npm/colors/HexInput.js

@@ -28,14 +28,14 @@ var HexInput = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.onChange = function (event) {
             var hex = event.target.value;
-            var value = color_parser_1.parseColor(hex, 'rgba');
+            var value = (0, color_parser_1.parseColor)(hex, 'rgba');
             _this.setState({ hex: hex });
-            if (misc_1.isPresent(value)) {
+            if ((0, misc_1.isPresent)(value)) {
                 _this.props.onHexChange(hex, value, event);
             }
         };
         _this.onBlur = function () {
-            if (!misc_1.isPresent(color_parser_1.parseColor(_this.state.hex, 'rgba'))) {
+            if (!(0, misc_1.isPresent)((0, color_parser_1.parseColor)(_this.state.hex, 'rgba'))) {
                 _this.setState({ hex: _this.state.originalHex });
             }
         };

package/dist/npm/colors/Picker.js

@@ -34,7 +34,7 @@ var Picker = function (props) {
     return (React.createElement(React.Fragment, null,
         props.input,
         props.button,
-        React.createElement(kendo_react_popup_1.Popup, __assign({ style: __assign(__assign({}, (popupSettings || {}).style), { direction: props.dir }) }, popupSettings, { anchor: props.popupAnchor, anchorAlign: anchorAlign, popupAlign: popupAlign, show: props.open, onOpen: props.onOpen, onClose: props.onClose, className: kendo_react_common_1.classNames('k-reset', popupSettings.className) }), props.content)));
+        React.createElement(kendo_react_popup_1.Popup, __assign({ style: __assign(__assign({}, (popupSettings || {}).style), { direction: props.dir }) }, popupSettings, { anchor: props.popupAnchor, anchorAlign: anchorAlign, popupAlign: popupAlign, show: props.open, onOpen: props.onOpen, onClose: props.onClose, className: (0, kendo_react_common_1.classNames)('k-reset', popupSettings.className) }), props.content)));
 };
 exports.Picker = Picker;
 exports.Picker.displayName = 'KendoPickerComponent';

package/dist/npm/colors/utils/color-palette.service.js

@@ -12,7 +12,7 @@ var ColorPaletteService = /** @class */ (function () {
     }
     ColorPaletteService.prototype.setColorMatrix = function (palette, columns) {
         this.colorRows = [];
-        if (!(misc_1.isPresent(palette) && palette.length)) {
+        if (!((0, misc_1.isPresent)(palette) && palette.length)) {
             return;
         }
         columns = columns || palette.length;
@@ -23,12 +23,12 @@ var ColorPaletteService = /** @class */ (function () {
     };
     ColorPaletteService.prototype.getCellCoordsFor = function (color) {
         var _this = this;
-        if (!misc_1.isPresent(color)) {
+        if (!(0, misc_1.isPresent)(color)) {
             return;
         }
-        var parsedColor = color ? kendo_drawing_1.parseColor(color, true) : color;
+        var parsedColor = color ? (0, kendo_drawing_1.parseColor)(color, true) : color;
         var colors = [color];
-        if (misc_1.isPresent(parsedColor)) {
+        if ((0, misc_1.isPresent)(parsedColor)) {
             colors.push(parsedColor.toCss(), parsedColor.toCssRgba());
         }
         var _loop_1 = function (row) {
@@ -51,13 +51,13 @@ var ColorPaletteService = /** @class */ (function () {
         }
     };
     ColorPaletteService.prototype.getColorAt = function (cellCoords) {
-        if (!(misc_1.isPresent(cellCoords) && misc_1.isPresent(this.colorRows[cellCoords.row]))) {
+        if (!((0, misc_1.isPresent)(cellCoords) && (0, misc_1.isPresent)(this.colorRows[cellCoords.row]))) {
             return;
         }
         return this.colorRows[cellCoords.row][cellCoords.col];
     };
     ColorPaletteService.prototype.getNextCell = function (current, horizontalStep, verticalStep) {
-        if (!(misc_1.isPresent(current) && misc_1.isPresent(current.row) && misc_1.isPresent(current.col))) {
+        if (!((0, misc_1.isPresent)(current) && (0, misc_1.isPresent)(current.row) && (0, misc_1.isPresent)(current.col))) {
             return { row: 0, col: 0 };
         }
         var row = this.clampIndex(current.row + verticalStep, this.colorRows.length - 1);