@progress/kendo-react-inputs 13.4.0-develop.5 → 14.0.0-develop.1

package/colors/ColorPalette.d.ts

@@ -5,8 +5,8 @@
  * 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 { ColorPaletteHandle } from './interfaces/ColorPaletteHandle.js';
 import * as React from 'react';
 /**
  * @hidden
@@ -21,85 +21,25 @@ export declare const DEFAULT_COLUMNS_COUNT = 10;
  */
 export declare const DEFAULT_PRESET = "office";
 /**
+ * The default props of the ColorPalette component.
+ *
  * @hidden
  */
+export declare const defaultColorPaletteProps: {
+    palette: string;
+    columns: number;
+    tileSize: number;
+};
+/**
+ * @hidden
+ *
+ * @deprecated This interface is no longer used in the functional implementation but maintained for backward compatibility
+ */
 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.
@@ -108,14 +48,7 @@ export declare class ColorPaletteWithoutContext extends React.Component<ColorPal
  */
 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).
+ * Represents the [KendoReact ColorPalette component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpalette) (Functional Implementation).
  *
  * 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).
@@ -127,3 +60,9 @@ export type ColorPalette = ColorPaletteHandle;
  * ```
  */
 export declare const ColorPalette: React.ForwardRefExoticComponent<ColorPaletteProps & React.RefAttributes<any>>;
+/**
+ * ColorPalette component without context (for backward compatibility).
+ *
+ * @hidden
+ */
+export declare const ColorPaletteWithoutContext: React.ForwardRefExoticComponent<ColorPaletteProps & React.RefAttributes<ColorPaletteHandle>>;

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,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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),l=require("prop-types"),re=require("./utils/color-palette.service.js"),w=require("@progress/kendo-react-common"),se=require("./models/palette-presets.js"),q=require("./utils/color-parser.js");function le(c){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const h in c)if(h!=="default"){const E=Object.getOwnPropertyDescriptor(c,h);Object.defineProperty(p,h,E.get?E:{enumerable:!0,get:()=>c[h]})}}return p.default=c,Object.freeze(p)}const k=le(n),z=24,B=10,j="office",D={palette:j,columns:B,tileSize:z},V=w.createPropsContext(),ne=c=>{if(Array.isArray(c))return c;if(typeof c=="string"){const p=se.PALETTEPRESETS[c];if(p)return p.colors}return[]},F=k.forwardRef((c,p)=>{const h=w.usePropsContext(V,c),{palette:E=D.palette,columns:L=D.columns,tileSize:u=D.tileSize,value:x,defaultValue:$,disabled:d=!1,tabIndex:K,onChange:P,onFocus:I,className:W,size:N,id:Z,ariaLabelledBy:G,ariaDescribedBy:J}=h,S=n.useRef(null),Q=n.useRef({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),_=L!=null?L:D.columns,b=n.useMemo(()=>ne(E),[E]),t=n.useMemo(()=>{const o=new re.ColorPaletteService;return o.setColorMatrix(b,_),o},[b,_]),[g,O]=n.useState(()=>x!==void 0?x:$||""),[T,R]=n.useState(""),y=x!==void 0;n.useEffect(()=>{y&&O(x)},[x,y]);const X=n.useCallback(o=>{if(d||b.length===0)return;const f=g||b[0];R(f),I&&I(o)},[d,b,g,I]),Y=n.useCallback(()=>{R("")},[]),ee=n.useCallback(o=>{if(d)return;const{key:f}=o,r=()=>T||g||b[0],m=(s,e)=>s<0?e:s>e?0:s;switch(f){case"ArrowRight":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col+1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowLeft":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col-1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowDown":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e){const C=t.colorRows.length-1,a=m(e.row+1,C),i=Math.min(e.col,t.colorRows[a].length-1),v=t.colorRows[a][i];v&&R(v)}}break;case"ArrowUp":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e){const C=t.colorRows.length-1,a=m(e.row-1,C),i=Math.min(e.col,t.colorRows[a].length-1),v=t.colorRows[a][i];v&&R(v)}}break;case"Enter":o.preventDefault();{const s=r();if(s&&(y||O(s),P)){const e=q.parseColor(s,"rgba");w.dispatchEvent(P,o,null,{value:s,rgbaValue:e||""})}}break}},[d,T,g,b,t,y,P]),A=n.useCallback((o,f)=>{if(d)return;const r=o;if(y||O(r),P){const m=q.parseColor(r,"rgba");w.dispatchEvent(P,f,null,{value:r,rgbaValue:m||""})}},[d,P,y]),U=n.useCallback((o,f)=>o.map((r,m)=>{const s=g&&r.toLowerCase()===g.toLowerCase(),e=T&&r.toLowerCase()===T.toLowerCase(),C=w.classNames("k-colorpalette-tile",{"k-selected":s,"k-focus":e}),a={backgroundColor:r};return typeof u=="number"?(a.width=`${u}px`,a.height=`${u}px`):u&&typeof u=="object"&&("width"in u&&(a.width=`${u.width}px`),"height"in u&&(a.height=`${u.height}px`)),k.createElement("td",{key:r,role:"gridcell",className:C,style:a,"aria-label":r,"aria-selected":s?"true":"false",onClick:i=>A(r,i)})}),[g,T,u,A]),oe=n.useCallback(()=>t.colorRows.map((f,r)=>k.createElement("tr",{key:f[0]||r,role:"row"},U(f,r))),[t,U]),M=n.useCallback(()=>({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),[]);n.useImperativeHandle(Q,M),n.useImperativeHandle(p,M);const te=w.classNames("k-colorpalette",W,{"k-disabled":d,"k-colorpalette-sm":N==="small","k-colorpalette-md":N==="medium","k-colorpalette-lg":N==="large"});return k.createElement("div",{ref:S,role:"grid",className:te,tabIndex:w.getTabIndex(K,d),id:Z,"aria-labelledby":G,"aria-describedby":J,"aria-disabled":d?"true":void 0,onFocus:X,onBlur:Y,onKeyDown:ee},k.createElement("table",{className:"k-colorpalette-table",role:"presentation"},k.createElement("tbody",null,oe())))});F.displayName="ColorPalette";F.propTypes={palette:l.oneOfType([l.arrayOf(l.string.isRequired),l.string]),columns:l.number,tileSize:l.any,defaultValue:l.string,value:l.string,disabled:l.bool,tabIndex:l.number,onChange:l.func,onFocus:l.func,id:l.string,ariaLabelledBy:l.string,ariaDescribedBy:l.string,className:l.string,size:l.oneOf(["small","medium","large"])};const H=w.withIdHOC(F);H.displayName="KendoReactColorPalette";const ae=F;exports.ColorPalette=H;exports.ColorPalettePropsContext=V;exports.ColorPaletteWithoutContext=ae;exports.DEFAULT_COLUMNS_COUNT=B;exports.DEFAULT_PRESET=j;exports.DEFAULT_TILE_SIZE=z;exports.defaultColorPaletteProps=D;

package/colors/ColorPalette.mjs

@@ -5,200 +5,226 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as i from "react";
-import s from "prop-types";
-import { ColorPaletteService as w } from "./utils/color-palette.service.mjs";
-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";
-const I = 24, C = 10, D = "office", a = class a extends i.Component {
-  constructor(t) {
-    super(t), this.wrapperRef = i.createRef(), this.paletteService = null, this.focus = () => {
-      this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
-    }, this.onKeyDown = (e) => {
-      switch (e.key) {
-        case l.down:
-          this.handleCellNavigation(0, 1);
+import * as R from "react";
+import { useRef as z, useMemo as O, useState as U, useEffect as re, useCallback as p, useImperativeHandle as V } from "react";
+import l from "prop-types";
+import { ColorPaletteService as se } from "./utils/color-palette.service.mjs";
+import { withIdHOC as le, createPropsContext as ne, usePropsContext as ae, dispatchEvent as M, classNames as H, getTabIndex as ce } from "@progress/kendo-react-common";
+import { PALETTEPRESETS as ie } from "./models/palette-presets.mjs";
+import { parseColor as $ } from "./utils/color-parser.mjs";
+const ue = 24, de = 10, fe = "office", F = {
+  palette: fe,
+  columns: de,
+  tileSize: ue
+}, Ce = ne(), we = (m) => {
+  if (Array.isArray(m))
+    return m;
+  if (typeof m == "string") {
+    const P = ie[m];
+    if (P)
+      return P.colors;
+  }
+  return [];
+}, v = R.forwardRef((m, P) => {
+  const K = ae(Ce, m), {
+    palette: I = F.palette,
+    columns: S = F.columns,
+    tileSize: c = F.tileSize,
+    value: y,
+    defaultValue: j,
+    disabled: i = !1,
+    tabIndex: q,
+    onChange: g,
+    onFocus: D,
+    className: W,
+    size: L,
+    id: Z,
+    ariaLabelledBy: G,
+    ariaDescribedBy: J
+  } = K, k = z(null), Q = z({
+    focus: () => {
+      var o;
+      (o = k.current) == null || o.focus();
+    },
+    wrapperRef: k
+  }), A = S != null ? S : F.columns, f = O(() => we(I), [I]), t = O(() => {
+    const o = new se();
+    return o.setColorMatrix(f, A), o;
+  }, [f, A]), [C, T] = U(() => y !== void 0 ? y : j || ""), [x, b] = U(""), h = y !== void 0;
+  re(() => {
+    h && T(y);
+  }, [y, h]);
+  const X = p(
+    (o) => {
+      if (i || f.length === 0)
+        return;
+      const u = C || f[0];
+      b(u), D && D(o);
+    },
+    [i, f, C, D]
+  ), Y = p(() => {
+    b("");
+  }, []), ee = p(
+    (o) => {
+      if (i)
+        return;
+      const { key: u } = o, r = () => x || C || f[0], w = (s, e) => s < 0 ? e : s > e ? 0 : s;
+      switch (u) {
+        case "ArrowRight":
+          o.preventDefault();
+          {
+            const s = r(), e = t.getCellCoordsFor(s);
+            if (e && t.colorRows[e.row]) {
+              const d = t.colorRows[e.row].length - 1, n = w(e.col + 1, d), a = t.colorRows[e.row][n];
+              a && b(a);
+            }
+          }
           break;
-        case l.up:
-          this.handleCellNavigation(0, -1);
+        case "ArrowLeft":
+          o.preventDefault();
+          {
+            const s = r(), e = t.getCellCoordsFor(s);
+            if (e && t.colorRows[e.row]) {
+              const d = t.colorRows[e.row].length - 1, n = w(e.col - 1, d), a = t.colorRows[e.row][n];
+              a && b(a);
+            }
+          }
           break;
-        case l.right:
-          this.handleCellNavigation(1, 0);
+        case "ArrowDown":
+          o.preventDefault();
+          {
+            const s = r(), e = t.getCellCoordsFor(s);
+            if (e) {
+              const d = t.colorRows.length - 1, n = w(e.row + 1, d), a = Math.min(e.col, t.colorRows[n].length - 1), E = t.colorRows[n][a];
+              E && b(E);
+            }
+          }
           break;
-        case l.left:
-          this.handleCellNavigation(-1, 0);
+        case "ArrowUp":
+          o.preventDefault();
+          {
+            const s = r(), e = t.getCellCoordsFor(s);
+            if (e) {
+              const d = t.colorRows.length - 1, n = w(e.row - 1, d), a = Math.min(e.col, t.colorRows[n].length - 1), E = t.colorRows[n][a];
+              E && b(E);
+            }
+          }
           break;
-        case l.enter:
-          this.handleEnter(e);
+        case "Enter":
+          o.preventDefault();
+          {
+            const s = r();
+            if (s && (h || T(s), g)) {
+              const e = $(s, "rgba");
+              M(g, o, null, {
+                value: s,
+                rgbaValue: 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;
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const t = this.getPaletteInfo(), e = this.paletteService = new w();
-    e.setColorMatrix(t.colors, t.columns);
-    const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor);
-    return t.colors.length ? /* @__PURE__ */ i.createElement(
-      "div",
-      {
-        id: this.props.id,
-        role: "grid",
-        className: f(
-          "k-colorpalette",
-          {
-            [`k-colorpalette-${F.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(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)))
-    ) : "";
-  }
-  /**
-   * @hidden
-   */
-  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) {
-    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;
-  }
-  get isUncontrolled() {
-    return this.props.value === void 0;
-  }
-  getPaletteInfo() {
-    if (typeof this.props.palette == "string") {
-      const t = z[this.props.palette];
-      return T(t) ? {
-        colors: t.colors,
-        columns: this.props.columns || t.columns || C
-      } : { colors: [], columns: 0 };
-    }
-    return { colors: this.props.palette || [], columns: this.props.columns || C };
-  }
-  renderRows(t, e, o) {
-    return t.map((r, n) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: n }, this.renderColumns(r, n, e, o)));
-  }
-  renderColumns(t, e, o, r) {
-    const n = o !== void 0 && o.row === e, m = o && o.col, g = r !== void 0 && r.row === e, v = r && r.col;
-    return t.map((p, c) => {
-      const h = n && m === c, b = f("k-colorpalette-tile", {
-        "k-selected": h,
-        "k-focus": g && v === c
-      });
-      let u = {
-        width: this.props.tileSize,
-        height: this.props.tileSize
+    },
+    [i, x, C, f, t, h, g]
+  ), N = p(
+    (o, u) => {
+      if (i)
+        return;
+      const r = o;
+      if (h || T(r), g) {
+        const w = $(r, "rgba");
+        M(g, u, null, {
+          value: r,
+          rgbaValue: w || ""
+        });
+      }
+    },
+    [i, g, h]
+  ), B = p(
+    (o, u) => o.map((r, w) => {
+      const s = C && r.toLowerCase() === C.toLowerCase(), e = x && r.toLowerCase() === x.toLowerCase(), d = H("k-colorpalette-tile", {
+        "k-selected": s,
+        "k-focus": e
+      }), n = {
+        backgroundColor: r
       };
-      return typeof this.props.tileSize == "object" && (u = {
-        width: this.props.tileSize.width,
-        height: this.props.tileSize.height
-      }), /* @__PURE__ */ i.createElement(
+      return typeof c == "number" ? (n.width = `${c}px`, n.height = `${c}px`) : c && typeof c == "object" && ("width" in c && (n.width = `${c.width}px`), "height" in c && (n.height = `${c.height}px`)), /* @__PURE__ */ R.createElement(
         "td",
         {
+          key: r,
           role: "gridcell",
-          className: b,
-          "aria-label": p,
-          "aria-selected": h ? !0 : this.props.disabled ? void 0 : !1,
-          style: { backgroundColor: p, ...u },
-          onClick: (S) => this.onColorClick(p, S),
-          id: this.createCellId({ row: e, col: c }),
-          key: c
+          className: d,
+          style: n,
+          "aria-label": r,
+          "aria-selected": s ? "true" : "false",
+          onClick: (a) => N(r, a)
         }
       );
-    });
-  }
-  createCellId(t) {
-    return `${this.guid}_${t.row}_${t.col}`;
-  }
-};
-a.displayName = "ColorPalette", a.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])
-}, a.defaultProps = {
-  palette: D,
-  tileSize: I,
-  size: void 0
+    }),
+    [C, x, c, N]
+  ), oe = p(() => t.colorRows.map((u, r) => /* @__PURE__ */ R.createElement("tr", { key: u[0] || r, role: "row" }, B(u, r))), [t, B]), _ = p(
+    () => ({
+      focus: () => {
+        var o;
+        (o = k.current) == null || o.focus();
+      },
+      wrapperRef: k
+    }),
+    []
+  );
+  V(Q, _), V(P, _);
+  const te = H("k-colorpalette", W, {
+    "k-disabled": i,
+    "k-colorpalette-sm": L === "small",
+    "k-colorpalette-md": L === "medium",
+    "k-colorpalette-lg": L === "large"
+  });
+  return /* @__PURE__ */ R.createElement(
+    "div",
+    {
+      ref: k,
+      role: "grid",
+      className: te,
+      tabIndex: ce(q, i),
+      id: Z,
+      "aria-labelledby": G,
+      "aria-describedby": J,
+      "aria-disabled": i ? "true" : void 0,
+      onFocus: X,
+      onBlur: Y,
+      onKeyDown: ee
+    },
+    /* @__PURE__ */ R.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ R.createElement("tbody", null, oe()))
+  );
+});
+v.displayName = "ColorPalette";
+v.propTypes = {
+  palette: l.oneOfType([l.arrayOf(l.string.isRequired), l.string]),
+  columns: l.number,
+  tileSize: l.any,
+  defaultValue: l.string,
+  value: l.string,
+  disabled: l.bool,
+  tabIndex: l.number,
+  onChange: l.func,
+  onFocus: l.func,
+  id: l.string,
+  ariaLabelledBy: l.string,
+  ariaDescribedBy: l.string,
+  className: l.string,
+  size: l.oneOf(["small", "medium", "large"])
 };
-let d = a;
-const L = E(), U = y(
-  k(
-    L,
-    d
-  )
+const pe = le(
+  v
 );
-U.displayName = "KendoReactColorPalette";
+pe.displayName = "KendoReactColorPalette";
+const ke = v;
 export {
-  U as ColorPalette,
-  L as ColorPalettePropsContext,
-  d as ColorPaletteWithoutContext,
-  C as DEFAULT_COLUMNS_COUNT,
-  D as DEFAULT_PRESET,
-  I as DEFAULT_TILE_SIZE
+  pe as ColorPalette,
+  Ce as ColorPalettePropsContext,
+  ke as ColorPaletteWithoutContext,
+  de as DEFAULT_COLUMNS_COUNT,
+  fe as DEFAULT_PRESET,
+  ue as DEFAULT_TILE_SIZE,
+  F as defaultColorPaletteProps
 };

package/colors/interfaces/ColorPaletteChangeEvent.d.ts

@@ -6,11 +6,11 @@
  *-------------------------------------------------------------------------------------------
  */
 import { BaseEvent } from '@progress/kendo-react-common';
-import { ColorPalette } from '../ColorPalette.js';
+import { ColorPaletteHandle } from './ColorPaletteHandle.js';
 /**
  * The arguments for the `onChange` ColorPalette event.
  */
-export interface ColorPaletteChangeEvent extends BaseEvent<ColorPalette> {
+export interface ColorPaletteChangeEvent extends BaseEvent<ColorPaletteHandle> {
     /**
      * The current value of the ColorPalette.
      */

package/colors/interfaces/ColorPaletteHandle.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * Represents the imperative handle exposed by the ColorPalette component through ref.
+ *
+ * @example
+ * ```tsx
+ * const paletteRef = useRef<ColorPaletteHandle>(null);
+ *
+ * // Focus the palette programmatically
+ * paletteRef.current?.focus();
+ *
+ * // Access the wrapper element
+ * const width = paletteRef.current?.wrapperRef.current?.offsetWidth;
+ *
+ * <ColorPalette ref={paletteRef} palette="basic" />
+ * ```
+ */
+export interface ColorPaletteHandle {
+    /**
+     * Programmatically focuses the ColorPalette component.
+     *
+     * When called:
+     * - The root div element receives DOM focus
+     * - The first color tile (or previously selected tile) is focused for keyboard navigation
+     * - The component's `onFocus` callback is triggered
+     */
+    focus: () => void;
+    /**
+     * A React ref to the root wrapper element of the ColorPalette.
+     *
+     * This ref can be used to access the underlying DOM element for scenarios such as:
+     * - Measuring the component dimensions
+     * - Integrating with non-React libraries
+     * - Programmatic scrolling or focus management
+     *
+     * The ref is populated after the component mounts and will be `null` before that.
+     */
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
+}