@progress/kendo-react-inputs 13.3.0 → 13.4.0-develop.2

package/colors/ColorPalette.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { ColorPaletteProps } from './interfaces/ColorPaletteProps.js';
+import * as React from 'react';
+/**
+ * @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>;
+        size: PropTypes.Requireable<string | null>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        palette: string;
+        tileSize: number;
+        size: undefined;
+    };
+    /**
+     * @hidden
+     */
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
+    private paletteService;
+    private get guid();
+    constructor(props: ColorPaletteProps);
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    render(): "" | React.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](https://www.telerik.com/kendo-react-ui/components/inputs/props-context) 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 type ColorPalette = ColorPaletteHandle;
+/**
+ * Represents the [KendoReact ColorPalette component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpalette).
+ *
+ * Accepts properties of type [ColorPaletteProps](https://www.telerik.com/kendo-react-ui/components/inputs/api/colorpaletteprops).
+ * Obtaining the `ref` returns an object of type [ColorPaletteHandle](https://www.telerik.com/kendo-react-ui/components/inputs/api/colorpalettehandle).
+ *
+ * ```jsx
+ * const App = () => {
+ *     return <ColorPalette palette='basic' />;
+ * }
+ * ```
+ */
+export declare const ColorPalette: React.ForwardRefExoticComponent<ColorPaletteProps & React.RefAttributes<any>>;

package/colors/ColorPalette.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),s=require("prop-types"),k=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),T=require("./models/palette-presets.js"),F=require("./utils/misc.js"),N=require("./utils/color-parser.js");function D(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const l=D(R),g=24,u=10,S="office",n=class n extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new k.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor);return t.colors.length?l.createElement("div",{id:this.props.id,role:"grid",className:r.classNames("k-colorpalette",{[`k-colorpalette-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},l.createElement("table",{className:"k-colorpalette-table",role:"presentation"},l.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:N.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=T.PALETTEPRESETS[this.props.palette];return F.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||u}:{colors:[],columns:0}}return{colors:this.props.palette||[],columns:this.props.columns||u}}renderRows(t,e,o){return t.map((i,c)=>l.createElement("tr",{role:"row",key:c},this.renderColumns(i,c,e,o)))}renderColumns(t,e,o,i){const c=o!==void 0&&o.row===e,b=o&&o.col,E=i!==void 0&&i.row===e,w=i&&i.col;return t.map((h,d)=>{const f=c&&b===d,y=r.classNames("k-colorpalette-tile",{"k-selected":f,"k-focus":E&&w===d});let C={width:this.props.tileSize,height:this.props.tileSize};return typeof this.props.tileSize=="object"&&(C={width:this.props.tileSize.width,height:this.props.tileSize.height}),l.createElement("td",{role:"gridcell",className:y,"aria-label":h,"aria-selected":f?!0:this.props.disabled?void 0:!1,style:{backgroundColor:h,...C},onClick:P=>this.onColorClick(h,P),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};n.displayName="ColorPalette",n.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string,size:s.oneOf(["small","medium","large",null])},n.defaultProps={palette:S,tileSize:g,size:"medium"};let p=n;const m=r.createPropsContext(),v=r.withIdHOC(r.withPropsContext(m,p));v.displayName="KendoReactColorPalette";exports.ColorPalette=v;exports.ColorPalettePropsContext=m;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=u;exports.DEFAULT_PRESET=S;exports.DEFAULT_TILE_SIZE=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),s=require("prop-types"),k=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),T=require("./models/palette-presets.js"),F=require("./utils/misc.js"),N=require("./utils/color-parser.js");function D(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const l=D(R),g=24,u=10,v="office",n=class n extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new k.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor);return t.colors.length?l.createElement("div",{id:this.props.id,role:"grid",className:r.classNames("k-colorpalette",{[`k-colorpalette-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},l.createElement("table",{className:"k-colorpalette-table",role:"presentation"},l.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:N.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=T.PALETTEPRESETS[this.props.palette];return F.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||u}:{colors:[],columns:0}}return{colors:this.props.palette||[],columns:this.props.columns||u}}renderRows(t,e,o){return t.map((i,c)=>l.createElement("tr",{role:"row",key:c},this.renderColumns(i,c,e,o)))}renderColumns(t,e,o,i){const c=o!==void 0&&o.row===e,m=o&&o.col,E=i!==void 0&&i.row===e,w=i&&i.col;return t.map((h,d)=>{const f=c&&m===d,y=r.classNames("k-colorpalette-tile",{"k-selected":f,"k-focus":E&&w===d});let C={width:this.props.tileSize,height:this.props.tileSize};return typeof this.props.tileSize=="object"&&(C={width:this.props.tileSize.width,height:this.props.tileSize.height}),l.createElement("td",{role:"gridcell",className:y,"aria-label":h,"aria-selected":f?!0:this.props.disabled?void 0:!1,style:{backgroundColor:h,...C},onClick:P=>this.onColorClick(h,P),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};n.displayName="ColorPalette",n.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string,size:s.oneOf(["small","medium","large",null])},n.defaultProps={palette:v,tileSize:g,size:void 0};let p=n;const S=r.createPropsContext(),b=r.withIdHOC(r.withPropsContext(S,p));b.displayName="KendoReactColorPalette";exports.ColorPalette=b;exports.ColorPalettePropsContext=S;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=u;exports.DEFAULT_PRESET=v;exports.DEFAULT_TILE_SIZE=g;

package/colors/ColorPalette.mjs

@@ -8,7 +8,7 @@
 import * as i from "react";
 import s from "prop-types";
 import { ColorPaletteService as w } from "./utils/color-palette.service.mjs";
-import { KEYS as l, classNames as f, kendoThemeMaps as y, getTabIndex as E, dispatchEvent as k, createPropsContext as R, withIdHOC as F, withPropsContext as N } from "@progress/kendo-react-common";
+import { withIdHOC as y, createPropsContext as E, withPropsContext as k, KEYS as l, getTabIndex as R, classNames as f, kendoThemeMaps as F, dispatchEvent as N } from "@progress/kendo-react-common";
 import { PALETTEPRESETS as z } from "./models/palette-presets.mjs";
 import { isPresent as T } from "./utils/misc.mjs";
 import { parseColor as P } from "./utils/color-parser.mjs";
@@ -66,7 +66,7 @@ const I = 24, C = 10, D = "office", a = class a extends i.Component {
         className: f(
           "k-colorpalette",
           {
-            [`k-colorpalette-${y.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorpalette-${F.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -77,7 +77,7 @@ const I = 24, C = 10, D = "office", a = class a extends i.Component {
         "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? "true" : void 0),
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
-        tabIndex: E(this.props.tabIndex, this.props.disabled),
+        tabIndex: R(this.props.tabIndex, this.props.disabled),
         ref: this.wrapperRef
       },
       /* @__PURE__ */ i.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
@@ -112,7 +112,7 @@ const I = 24, C = 10, D = "office", a = class a extends i.Component {
     this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
   }
   dispatchChangeEvent(t, e) {
-    k(this.props.onChange, e, this, { value: t, rgbaValue: P(t, "rgba") });
+    N(this.props.onChange, e, this, { value: t, rgbaValue: P(t, "rgba") });
   }
   get focusedColorCooridanates() {
     return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
@@ -184,11 +184,11 @@ a.displayName = "ColorPalette", a.propTypes = {
 }, a.defaultProps = {
   palette: D,
   tileSize: I,
-  size: "medium"
+  size: void 0
 };
 let d = a;
-const L = R(), U = F(
-  N(
+const L = E(), U = y(
+  k(
     L,
     d
   )

package/colors/ColorPicker.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorPickerProps } from './interfaces/ColorPickerProps.js';
+import * as React from 'react';
+/**
+ * @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](https://www.telerik.com/kendo-react-ui/components/inputs/props-context) article.
+ */
+export declare const ColorPickerPropsContext: React.Context<(p: ColorPickerProps) => ColorPickerProps>;
+/**
+ * Represents the [KendoReact ColorPicker component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *     return <ColorPicker />;
+ * }
+ * ```
+ */
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerHandle | null>>;

package/colors/ColorPicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const xe=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),ke=require("../package-metadata.js"),qe=require("./Picker.js"),Ve=require("./ColorGradient.js"),Q=require("./ColorPalette.js"),N=require("./FlatColorPicker.js"),Me=require("@progress/kendo-react-buttons"),He=require("@progress/kendo-svg-icons"),d=require("../messages/index.js"),We=require("@progress/kendo-react-intl"),Ue=require("../common/AdaptiveMode.js"),je=require("@progress/kendo-react-layout");function Ge(g){const S=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const w in g)if(w!=="default"){const I=Object.getOwnPropertyDescriptor(g,w);Object.defineProperty(S,w,I.get?I:{enumerable:!0,get:()=>g[w]})}}return S.default=g,Object.freeze(S)}const t=Ge(xe),Ke={opacity:!0},$e={palette:Q.DEFAULT_PRESET,tileSize:Q.DEFAULT_TILE_SIZE},J=g=>g!==void 0,me=n.createPropsContext(),X=t.forwardRef((g,S)=>{var ue,de;const w=!n.validatePackage(ke.packageMetadata,{component:"ColorPicker"}),I=n.getLicenseMessage(ke.packageMetadata),l=n.usePropsContext(me,g),T=We.useLocalization(),Y=n.useAdaptiveModeContext(),{size:p=E.size,rounded:x=E.rounded,fillMode:F=E.fillMode,gradientSettings:P=E.gradientSettings,paletteSettings:_=E.paletteSettings,flatColorPickerSettings:h,view:f=l.views?void 0:E.view,views:s=f?void 0:E.views,activeView:ee,popupSettings:C,valid:Ce,disabled:q,tabIndex:be,icon:V,svgIcon:M,iconClassName:B,onChange:H,onFocus:W,onBlur:U,onActiveColorClick:j,className:Ee,adaptive:we,adaptiveTitle:te=T.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle]),adaptiveSubtitle:ne}=l,u=t.useRef(null),R=t.useRef(null),O=t.useRef(null),m=t.useRef(null),y=t.useRef(void 0),Pe=t.useRef(null),[ye,ae]=t.useState(!1),[Se,Te]=t.useState(l.defaultValue||void 0),[_e,he]=t.useState(!1),[D,Re]=t.useState(),G=J(l.value),b=J(l.open),i=G?l.value:Se,v=b?l.open:_e,re=t.useRef(i),oe=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(S,()=>({element:u.current,actionElement:Pe.current,value:i,focus:oe}),[i,oe]);const K=!!(D&&Y&&D<=Y.medium&&we);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(ze.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const r=t.useCallback((e,c)=>{b||(!e&&!c&&u&&u.current&&u.current.focus(),he(e))},[b]),le=t.useMemo(()=>new n.Navigation({root:u,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,c,a)=>{r(!1)},Enter:(e,c,a)=>{!b&&e===u.current&&(a.preventDefault(),a.stopPropagation(),r(!0))},ArrowDown:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),r(!0))},ArrowUp:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),r(!1))},Tab:(e,c,a)=>{var A,pe,ge;if(n.getActiveElement(document)!==u.current){const fe=(A=O.current)==null?void 0:A.wrapperRef.current,z=(pe=R.current)==null?void 0:pe.wrapperRef.current,ve=(ge=m.current)==null?void 0:ge.element;f==="palette"&&fe?n.keepFocusInContainer(a,fe):f==="gradient"&&z?n.keepFocusInContainer(a,z):f==="combo"&&z?n.keepFocusInContainer(a,z.parentElement):s&&ve&&n.keepFocusInContainer(a,ve)}}}}}),[r,b]),Ae=t.useCallback(le.triggerKeyboardEvent.bind(le),[]),Ie=t.useCallback(()=>{b||(R.current&&R.current.wrapperRef.current?n.focusFirstFocusableChild(R.current.wrapperRef.current):O.current?O.current.focus():m.current&&m.current.element&&n.focusFirstFocusableChild(m.current.element))},[b]),L=e=>re.current=e,ie=t.useCallback(e=>{const c={value:re.current,nativeEvent:e.nativeEvent,syntheticEvent:e};k(c),r(!v,!0)},[v]),$=t.useCallback(()=>{r(!1,!0)},[r]),Fe=t.useCallback(e=>{j&&j.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:{element:u.current,value:i}})},[j,i]),Be=t.useCallback(e=>{y.current?(clearTimeout(y.current),y.current=void 0):(ae(!0),K&&!v&&r(!0)),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[K,W,v,r]),Oe=t.useCallback(()=>{r(!1,!0),ae(!1),y.current=void 0},[]),De=t.useCallback(e=>{clearTimeout(y.current),y.current=window.setTimeout(Oe),U&&U.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[U]),k=t.useCallback((e,c)=>{var A;const a=c?e.rgbaValue||"":(A=e.value)!=null?A:"";G||Te(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),r(!1)},[G,H]),ce=t.useCallback(e=>k(e,!0),[J,k]),Z=t.useCallback(e=>t.createElement(t.Fragment,null,(f==="combo"||f==="gradient")&&t.createElement(Ve.ColorGradient,{...P,_adaptive:e,ref:R,isInsidePopup:!0,size:e?"large":p,fillMode:F,value:i,onChange:k}),(f==="combo"||f==="palette")&&t.createElement(Q.ColorPalette,{..._,ref:O,size:e?"large":p,value:i,onChange:ce}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(N.FlatColorPicker,{...h,_paletteSettings:_,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["gradient","palette"],activeView:ee,setOpen:r,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(N.FlatColorPicker,{...h,_paletteSettings:_,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["palette","gradient"],setOpen:r,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(N.FlatColorPicker,{...h,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["gradient"],showButtons:!e,setOpen:r,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(N.FlatColorPicker,{...h,_paletteSettings:_,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["palette"],showButtons:!e,setOpen:r,value:i,onChange:k,setAdaptiveModeValue:L}),w&&t.createElement(n.WatermarkOverlay,{message:I})),[ee,F,h,P,k,ce,_,r,p,i,f,s]),Le=t.useCallback(()=>{var c;const e={animation:!!((c=C==null?void 0:C.animate)==null||c),title:te,subTitle:ne,expand:v,onClose:$,windowWidth:D,footer:{cancelText:T.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:$,applyText:T.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:ie}};return t.createElement(Ue.AdaptiveMode,{...e},t.createElement(je.ActionSheetContent,null,Z(!0)))},[C==null?void 0:C.animate,te,ne,v,$,D,T,ie,Z]),ze=t.useCallback(e=>{for(const c of e)Re(c.target.clientWidth)},[]),se=n.useDir(u,l.dir),Ne=Ce!==!1;return t.createElement("span",{id:l.id,role:"combobox","aria-label":l.ariaLabel,"aria-labelledby":l.ariaLabelledBy,"aria-describedby":l.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":v,"aria-controls":`k-colorpicker-popup-${(ue=l.id)!=null?ue:0}`,"aria-disabled":q?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${F}`]:F,[`k-rounded-${n.kendoThemeMaps.roundedMap[x]||x}`]:x,"k-invalid":!Ne,"k-disabled":q,"k-focus":ye,className:Ee}),ref:u,tabIndex:n.getTabIndex(be,q),title:l.title,onKeyDown:Ae,onFocus:Be,onBlur:De,dir:se},t.createElement(qe.Picker,{dir:se,open:v,onOpen:Ie,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(de=l.id)!=null?de:0}`,...C},input:t.createElement("span",{onClick:Fe,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!i,"k-icon-color-preview":V||M||B})},B&&t.createElement("span",{className:n.classNames("k-color-preview-icon",B)}),!B&&(V||M)&&t.createElement(n.IconWrap,{name:V,icon:M}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:i}}))),button:t.createElement(Me.Button,{tabIndex:-1,type:"button",onClick:()=>r(!v),className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:He.caretAltDownIcon,"aria-label":T.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:Z(!1),_mobileMode:K,_actionSheet:Le()}))});X.propTypes={value:o.string,defaultValue:o.string,disabled:o.bool,view:o.oneOf(["gradient","palette","combo"]),views:o.arrayOf(o.oneOf(["gradient","palette"])),dir:o.string,id:o.string,icon:o.string,svgIcon:n.svgIconPropType,ariaLabelledBy:o.string,ariaDescribedBy:o.string,size:o.oneOf([null,"small","medium","large"]),rounded:o.oneOf([null,"small","medium","large","full"]),fillMode:o.oneOf([null,"solid","flat","outline"]),className:o.string,adaptive:o.bool,adaptiveTitle:o.string,adaptiveSubtitle:o.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:Ke,paletteSettings:$e};X.displayName="KendoColorPicker";exports.ColorPicker=X;exports.ColorPickerPropsContext=me;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const xe=require("react"),r=require("prop-types"),n=require("@progress/kendo-react-common"),ke=require("../package-metadata.js"),qe=require("./Picker.js"),Ve=require("./ColorGradient.js"),Q=require("./ColorPalette.js"),N=require("./FlatColorPicker.js"),Me=require("@progress/kendo-react-buttons"),He=require("@progress/kendo-svg-icons"),d=require("../messages/index.js"),We=require("@progress/kendo-react-intl"),Ue=require("../common/AdaptiveMode.js"),je=require("@progress/kendo-react-layout");function Ge(g){const T=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const P in g)if(P!=="default"){const F=Object.getOwnPropertyDescriptor(g,P);Object.defineProperty(T,P,F.get?F:{enumerable:!0,get:()=>g[P]})}}return T.default=g,Object.freeze(T)}const t=Ge(xe),Ke={opacity:!0},$e={palette:Q.DEFAULT_PRESET,tileSize:Q.DEFAULT_TILE_SIZE},J=g=>g!==void 0,me=n.createPropsContext(),X=t.forwardRef((g,T)=>{var ue,de;const P=!n.validatePackage(ke.packageMetadata,{component:"ColorPicker"}),F=n.getLicenseMessage(ke.packageMetadata),l=n.usePropsContext(me,g),_=We.useLocalization(),Y=n.useAdaptiveModeContext(),{size:p=w.size,rounded:C=w.rounded,fillMode:x=w.fillMode,gradientSettings:y=w.gradientSettings,paletteSettings:h=w.paletteSettings,flatColorPickerSettings:R,view:f=l.views?void 0:w.view,views:s=f?void 0:w.views,activeView:ee,popupSettings:b,valid:Ce,disabled:q,tabIndex:be,icon:V,svgIcon:M,iconClassName:B,onChange:H,onFocus:W,onBlur:U,onActiveColorClick:j,className:Ee,adaptive:we,adaptiveTitle:te=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle]),adaptiveSubtitle:ne}=l,u=t.useRef(null),A=t.useRef(null),O=t.useRef(null),m=t.useRef(null),S=t.useRef(void 0),Pe=t.useRef(null),[ye,ae]=t.useState(!1),[Se,Te]=t.useState(l.defaultValue||void 0),[_e,he]=t.useState(!1),[D,Re]=t.useState(),G=J(l.value),E=J(l.open),i=G?l.value:Se,v=E?l.open:_e,oe=t.useRef(i),re=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(T,()=>({element:u.current,actionElement:Pe.current,value:i,focus:re}),[i,re]);const K=!!(D&&Y&&D<=Y.medium&&we);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(ze.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const o=t.useCallback((e,c)=>{E||(!e&&!c&&u&&u.current&&u.current.focus(),he(e))},[E]),le=t.useMemo(()=>new n.Navigation({root:u,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,c,a)=>{o(!1)},Enter:(e,c,a)=>{!E&&e===u.current&&(a.preventDefault(),a.stopPropagation(),o(!0))},ArrowDown:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),o(!0))},ArrowUp:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),o(!1))},Tab:(e,c,a)=>{var I,pe,ge;if(n.getActiveElement(document)!==u.current){const fe=(I=O.current)==null?void 0:I.wrapperRef.current,z=(pe=A.current)==null?void 0:pe.wrapperRef.current,ve=(ge=m.current)==null?void 0:ge.element;f==="palette"&&fe?n.keepFocusInContainer(a,fe):f==="gradient"&&z?n.keepFocusInContainer(a,z):f==="combo"&&z?n.keepFocusInContainer(a,z.parentElement):s&&ve&&n.keepFocusInContainer(a,ve)}}}}}),[o,E]),Ae=t.useCallback(le.triggerKeyboardEvent.bind(le),[]),Ie=t.useCallback(()=>{E||(A.current&&A.current.wrapperRef.current?n.focusFirstFocusableChild(A.current.wrapperRef.current):O.current?O.current.focus():m.current&&m.current.element&&n.focusFirstFocusableChild(m.current.element))},[E]),L=e=>oe.current=e,ie=t.useCallback(e=>{const c={value:oe.current,nativeEvent:e.nativeEvent,syntheticEvent:e};k(c),o(!v,!0)},[v]),$=t.useCallback(()=>{o(!1,!0)},[o]),Fe=t.useCallback(e=>{j&&j.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:{element:u.current,value:i}})},[j,i]),Be=t.useCallback(e=>{S.current?(clearTimeout(S.current),S.current=void 0):(ae(!0),K&&!v&&o(!0)),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[K,W,v,o]),Oe=t.useCallback(()=>{o(!1,!0),ae(!1),S.current=void 0},[]),De=t.useCallback(e=>{clearTimeout(S.current),S.current=window.setTimeout(Oe),U&&U.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[U]),k=t.useCallback((e,c)=>{var I;const a=c?e.rgbaValue||"":(I=e.value)!=null?I:"";G||Te(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),o(!1)},[G,H]),ce=t.useCallback(e=>k(e,!0),[J,k]),Z=t.useCallback(e=>t.createElement(t.Fragment,null,(f==="combo"||f==="gradient")&&t.createElement(Ve.ColorGradient,{...y,_adaptive:e,ref:A,isInsidePopup:!0,size:e?"large":p,value:i,onChange:k}),(f==="combo"||f==="palette")&&t.createElement(Q.ColorPalette,{...h,ref:O,size:e?"large":p,value:i,onChange:ce}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient","palette"],activeView:ee,setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette","gradient"],setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(N.FlatColorPicker,{...R,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:L}),P&&t.createElement(n.WatermarkOverlay,{message:F})),[ee,x,R,y,k,ce,h,o,p,i,f,s]),Le=t.useCallback(()=>{var c;const e={animation:!!((c=b==null?void 0:b.animate)==null||c),title:te,subTitle:ne,expand:v,onClose:$,windowWidth:D,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:$,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:ie}};return t.createElement(Ue.AdaptiveMode,{...e},t.createElement(je.ActionSheetContent,null,Z(!0)))},[b==null?void 0:b.animate,te,ne,v,$,D,_,ie,Z]),ze=t.useCallback(e=>{for(const c of e)Re(c.target.clientWidth)},[]),se=n.useDir(u,l.dir),Ne=Ce!==!1;return t.createElement("span",{id:l.id,role:"combobox","aria-label":l.ariaLabel,"aria-labelledby":l.ariaLabelledBy,"aria-describedby":l.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":v,"aria-controls":`k-colorpicker-popup-${(ue=l.id)!=null?ue:0}`,"aria-disabled":q?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${x}`]:x,[`k-rounded-${n.kendoThemeMaps.roundedMap[C]||C}`]:C,"k-invalid":!Ne,"k-disabled":q,"k-focus":ye,className:Ee}),ref:u,tabIndex:n.getTabIndex(be,q),title:l.title,onKeyDown:Ae,onFocus:Be,onBlur:De,dir:se},t.createElement(qe.Picker,{dir:se,open:v,onOpen:Ie,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(de=l.id)!=null?de:0}`,...b},input:t.createElement("span",{onClick:Fe,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!i,"k-icon-color-preview":V||M||B})},B&&t.createElement("span",{className:n.classNames("k-color-preview-icon",B)}),!B&&(V||M)&&t.createElement(n.IconWrap,{name:V,icon:M}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:i}}))),button:t.createElement(Me.Button,{tabIndex:-1,type:"button",onClick:()=>o(!v),className:"k-input-button",icon:"caret-alt-down",svgIcon:He.caretAltDownIcon,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:Z(!1),_mobileMode:K,_actionSheet:Le()}))});X.propTypes={value:r.string,defaultValue:r.string,disabled:r.bool,view:r.oneOf(["gradient","palette","combo"]),views:r.arrayOf(r.oneOf(["gradient","palette"])),dir:r.string,id:r.string,icon:r.string,svgIcon:n.svgIconPropType,ariaLabelledBy:r.string,ariaDescribedBy:r.string,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","full"]),fillMode:r.oneOf(["solid","flat","outline"]),className:r.string,adaptive:r.bool,adaptiveTitle:r.string,adaptiveSubtitle:r.string};const w={size:void 0,rounded:void 0,fillMode:void 0,view:"palette",views:["gradient","palette"],gradientSettings:Ke,paletteSettings:$e};X.displayName="KendoColorPicker";exports.ColorPicker=X;exports.ColorPickerPropsContext=me;