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

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>;
+}