@progress/kendo-react-inputs 8.2.0-develop.9 → 8.2.1-develop.1

package/colors/ColorGradient.mjs

@@ -6,154 +6,213 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as o from "react";
-import i from "prop-types";
-import { focusFirstFocusableChild as E, validatePackage as F, getTabIndex as u, classNames as H, Draggable as L, createPropsContext as D, withIdHOC as N, withPropsContext as A } from "@progress/kendo-react-common";
-import { packageMetadata as B } from "../package-metadata.mjs";
-import { Slider as m } from "../slider/Slider.mjs";
-import { fitIntoBounds as C, isPresent as v } from "./utils/misc.mjs";
-import { getHSV as g, getColorFromHue as d, getRGBA as c, getColorFromRGBA as P, parseColor as l, getColorFromHSV as w } from "./utils/color-parser.mjs";
-import { cacheHex as I, cacheRgba as M, removeCachedColor as T, cacheHsva as V, getCachedHsva as G, getCachedRgba as O, getCachedHex as U } from "./utils/color-cache.mjs";
-import j from "./ColorInput.mjs";
-import { ColorContrastLabels as W } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as $ } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as X } from "@progress/kendo-react-intl";
-import { colorGradientHueSliderLabel as f, messages as k, colorGradientAlphaSliderLabel as S } from "../messages/index.mjs";
-const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component {
-  constructor(e) {
-    super(e), this.wrapper = null, this.onHexChange = (t, s, r) => {
+import * as r from "react";
+import o from "prop-types";
+import { validatePackage as L, Navigation as m, getActiveElement as u, disableNavigatableContainer as C, keepFocusInContainer as F, TABBABLE_ELEMENTS as G, focusFirstFocusableChild as A, enableNavigatableContainer as N, getTabIndex as S, classNames as I, Draggable as T, createPropsContext as M, withIdHOC as _, withPropsContext as B } from "@progress/kendo-react-common";
+import { packageMetadata as P } from "../package-metadata.mjs";
+import { Slider as k } from "../slider/Slider.mjs";
+import { isPresent as R, fitIntoBounds as y } from "./utils/misc.mjs";
+import { getHSV as b, getColorFromHue as c, getRGBA as p, getColorFromRGBA as V, parseColor as d, getColorFromHSV as K } from "./utils/color-parser.mjs";
+import { cacheHex as U, cacheRgba as O, removeCachedColor as W, cacheHsva as $, getCachedHsva as j, getCachedRgba as X, getCachedHex as Y } from "./utils/color-cache.mjs";
+import z from "./ColorInput.mjs";
+import { ColorContrastLabels as q } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as J } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as Q } from "@progress/kendo-react-intl";
+import { colorGradientHueSliderLabel as E, messages as x, colorGradientAlphaSliderLabel as H } from "../messages/index.mjs";
+const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
+  constructor(t) {
+    super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.focus = () => {
+      this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
+    }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
-        const n = g(s);
-        this.setState({ hsva: n, backgroundColor: d(n.h), rgba: c(s), hex: t });
+        const n = b(s);
+        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: p(s), hex: e });
       } else
-        I(this.state.guid, s, t);
-      this.dispatchChangeEvent(s, r, r.nativeEvent);
-    }, this.onRgbaChange = (t, s) => {
-      const r = P(t);
+        U(this.state.guid, s, e);
+      this.dispatchChangeEvent(s, i, i.nativeEvent);
+    }, this.onRgbaChange = (e, s) => {
+      const i = V(e);
       if (this.isUncontrolled) {
-        const n = g(r), p = l(r, "hex");
-        this.setState({ hsva: n, backgroundColor: d(n.h), rgba: t, hex: p });
+        const n = b(i), l = d(i, "hex");
+        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: e, hex: l });
       } else
-        M(this.state.guid, r, t);
-      this.dispatchChangeEvent(r, s.syntheticEvent, s.nativeEvent);
-    }, this.onAlphaSliderChange = (t) => {
+        O(this.state.guid, i, e);
+      this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
+    }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
-        Object.assign({}, this.state.hsva, { a: t.value / 100 }),
-        t.syntheticEvent,
-        t.nativeEvent
+        Object.assign({}, this.state.hsva, { a: e.value / 100 }),
+        e.syntheticEvent,
+        e.nativeEvent
       );
-    }, this.onHueSliderChange = (t) => {
+    }, this.onHueSliderChange = (e) => {
       this.handleHsvaChange(
-        Object.assign({}, this.state.hsva, { h: t.value }),
-        t.syntheticEvent,
-        t.nativeEvent
+        Object.assign({}, this.state.hsva, { h: e.value }),
+        e.syntheticEvent,
+        e.nativeEvent
       );
-    }, this.onDrag = (t) => {
-      this.gradientWrapper.classList.add("k-dragging"), this.changePosition(t.event);
+    }, this.onDrag = (e) => {
+      this.gradientWrapper.classList.add("k-dragging"), this.changePosition(e.event);
     }, this.onRelease = () => {
       this.gradientWrapper.classList.remove("k-dragging");
-    }, this.onGradientWrapperClick = (t) => {
-      this.changePosition(t);
-    }, this.changePosition = (t) => {
-      const s = this.getGradientRectMetrics(), r = t.clientX - s.left, n = t.clientY - s.top, p = C(r, 0, s.width), x = C(n, 0, s.height), y = Object.assign(
-        {},
-        this.state.hsva,
-        { s: p / s.width, v: 1 - x / s.height }
-      );
-      this.handleHsvaChange(y, t, t.nativeEvent);
-    }, this.onFocus = (t) => {
+    }, this.onGradientWrapperClick = (e) => {
+      this.changePosition(e);
+    }, this.onHsvGradientKeyDown = (e) => {
+      var s;
+      (s = this.hsvNavigation) == null || s.triggerKeyboardEvent(e);
+    }, this.onHsvGradientValueChange = (e, s, i) => {
+      const n = parseInt(e.style.top, 10) + i, l = parseInt(e.style.left, 10) + s;
+      e.style.top = `${n}px`, e.style.left = `${l}px`, this.moveDragHandle(l, n);
+    }, this.changePosition = (e) => {
+      const s = this.getGradientRectMetrics(), i = e.clientX - s.left, n = e.clientY - s.top;
+      this.moveDragHandle(i, n);
+    }, this.onFocus = (e) => {
       this.props.onFocus && this.props.onFocus.call(
         void 0,
-        { nativeEvent: t, target: this }
+        { nativeEvent: e, target: this }
       );
-    }, this.focus = () => {
-      this.wrapper && E(this.wrapper);
-    }, F(B);
-    const a = e.value || e.defaultValue || l(R, Y);
+    }, this.onKeyDown = (e) => {
+      var s;
+      (s = this.navigation) == null || s.triggerKeyboardEvent(e);
+    }, L(P);
+    const a = t.value || t.defaultValue || d(w, Z);
     this.state = Object.assign({}, h.getStateFromValue(a), { isFirstRender: !0, guid: this.props.id });
   }
   /**
    * @hidden
    */
-  static getDerivedStateFromProps(e, a) {
-    return e.value && !a.isFirstRender ? h.getStateFromValue(e.value, a.guid) : null;
+  static getDerivedStateFromProps(t, a) {
+    return t.value && !a.isFirstRender ? h.getStateFromValue(t.value, a.guid) : null;
   }
   /**
    * @hidden
    */
   componentDidMount() {
-    this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 });
+    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.wrapperRef && this.hsvGradientRef) {
+      let t = 0, a = 0;
+      this.hsvNavigation = new m({
+        tabIndex: 0,
+        root: this.hsvGradientRef,
+        selectors: [".k-hsv-rectangle .k-hsv-draghandle"],
+        keyboardEvents: {
+          keydown: {
+            ArrowDown: (e, s, i) => {
+              a = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, 0, a);
+            },
+            ArrowUp: (e, s, i) => {
+              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, 0, a);
+            },
+            ArrowLeft: (e, s, i) => {
+              t = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, t, 0);
+            },
+            ArrowRight: (e, s, i) => {
+              t = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, t, 0);
+            }
+          }
+        }
+      });
+    }
+    this.wrapperRef && this.wrapperRef.current && (this.props.isInsidePopup ? this.hsvGradientRef.current && this.hsvGradientRef.current.focus() : this.navigation = new m({
+      tabIndex: 0,
+      root: this.wrapperRef,
+      selectors: [".k-colorgradient"],
+      keyboardEvents: {
+        keydown: {
+          Tab: (t, a, e) => {
+            u(document) === t ? C(t) : F(e, t, G);
+          },
+          Enter: (t, a, e) => {
+            u(document) === t && (A(t), N(t));
+          },
+          Escape: (t, a, e) => {
+            u(document) !== t && (t.focus(), C(t));
+          }
+        }
+      }
+    }));
   }
   /**
    * @hidden
    */
   componentWillUnmount() {
-    T(this.state.guid);
+    W(this.state.guid);
   }
   /**
    * @hidden
    */
-  componentDidUpdate(e, a) {
+  componentDidUpdate(t, a) {
     a.backgroundColor !== this.state.backgroundColor && this.setAlphaSliderBackground(this.state.backgroundColor);
   }
   /**
    * @hidden
    */
   renderRectangleDragHandle() {
-    let e = {};
+    let t = {};
     if (!this.state.isFirstRender) {
-      const a = this.getGradientRectMetrics(), t = (1 - this.state.hsva.v) * a.height, s = this.state.hsva.s * a.width;
-      e.top = `${t}px`, e.left = `${s}px`;
+      const a = this.getGradientRectMetrics(), e = (1 - this.state.hsva.v) * a.height, s = this.state.hsva.s * a.width;
+      t.top = `${e}px`, t.left = `${s}px`;
     }
-    return /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ r.createElement(
       "div",
       {
+        ref: this.hsvGradientRef,
         role: "slider",
-        tabIndex: u(this.props.tabIndex, this.props.disabled),
+        tabIndex: S(this.props.tabIndex, this.props.disabled),
         "aria-valuetext": this.props.ariaValueText,
         "aria-valuenow": parseInt(this.state.hex.substring(1), 16),
         "aria-label": this.props.ariaLabelHSV,
         "aria-orientation": void 0,
         "aria-disabled": this.props.disabled ? "true" : void 0,
         className: "k-hsv-draghandle k-draghandle",
-        style: e
+        style: t,
+        onKeyDown: this.onHsvGradientKeyDown
       }
     );
   }
   /**
    * @hidden
    */
-  handleHsvaChange(e, a, t) {
-    const s = w(e);
+  moveDragHandle(t, a) {
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = y(a, 0, i), l = y(t, 0, s), D = Object.assign(
+      {},
+      this.state.hsva,
+      { s: l / s, v: 1 - n / i }
+    );
+    this.handleHsvaChange(D, {}, {});
+  }
+  /**
+   * @hidden
+   */
+  handleHsvaChange(t, a, e) {
+    const s = K(t);
     if (this.isUncontrolled) {
-      const r = l(s, "hex");
-      this.setState({ hsva: e, backgroundColor: d(e.h), rgba: c(s), hex: r });
+      const i = d(s, "hex");
+      this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i });
     } else
-      V(this.state.guid, s, e);
-    this.dispatchChangeEvent(s, a, t);
+      $(this.state.guid, s, t);
+    this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
    */
-  dispatchChangeEvent(e, a, t) {
+  dispatchChangeEvent(t, a, e) {
     this.props.onChange && this.props.onChange.call(
       void 0,
-      { syntheticEvent: a, nativeEvent: t, target: this, value: e }
+      { syntheticEvent: a, nativeEvent: e, target: this, value: t }
     );
   }
   /**
    * @hidden
    */
-  static getStateFromValue(e, a) {
-    v(l(e, "hex")) || (e = R);
-    const t = G(a, e) || g(e), s = O(a, e) || c(e), r = U(a, e) || l(e, "hex"), n = d(t.h);
-    return { hsva: t, backgroundColor: n, rgba: s, hex: r };
+  static getStateFromValue(t, a) {
+    R(d(t, "hex")) || (t = w);
+    const e = j(a, t) || b(t), s = X(a, t) || p(t), i = Y(a, t) || d(t, "hex"), n = c(e.h);
+    return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
    * @hidden
    */
-  setAlphaSliderBackground(e) {
-    this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${e})`);
+  setAlphaSliderBackground(t) {
+    this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${t})`);
   }
   /**
    * @hidden
@@ -171,8 +230,8 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
    * @hidden
    */
   render() {
-    const e = X(this), a = H("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
-    return /* @__PURE__ */ o.createElement(
+    const t = Q(this), a = I("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
+    return /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
@@ -180,21 +239,22 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
         className: a,
         "aria-disabled": this.props.disabled ? "true" : void 0,
         style: this.props.style,
-        ref: (t) => this.wrapper = t,
-        tabIndex: u(this.props.tabIndex, this.props.disabled),
+        ref: this.wrapperRef,
+        tabIndex: S(this.props.tabIndex, this.props.disabled),
         "aria-label": this.props.ariaLabel,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
-        onFocus: this.onFocus
+        onFocus: this.onFocus,
+        onKeyDown: this.onKeyDown
       },
-      /* @__PURE__ */ o.createElement("div", { className: "k-colorgradient-canvas k-hstack" }, /* @__PURE__ */ o.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ o.createElement(
-        L,
+      /* @__PURE__ */ r.createElement("div", { className: "k-colorgradient-canvas k-hstack" }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
+        T,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
-          ref: (t) => this.gradientWrapper = t ? t.element : void 0
+          ref: (e) => this.gradientWrapper = e ? e.element : void 0
         },
-        /* @__PURE__ */ o.createElement(
+        /* @__PURE__ */ r.createElement(
           "div",
           {
             className: "k-hsv-gradient",
@@ -203,15 +263,15 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
           },
           this.renderRectangleDragHandle()
         )
-      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ o.createElement(
-        $,
+      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
+        J,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
           backgroundColor: this.props.backgroundColor
         }
-      )), /* @__PURE__ */ o.createElement("div", { className: "k-hsv-controls k-hstack" }, /* @__PURE__ */ o.createElement(
-        m,
+      )), /* @__PURE__ */ r.createElement("div", { className: "k-hsv-controls k-hstack" }, /* @__PURE__ */ r.createElement(
+        k,
         {
           value: this.state.hsva.h,
           buttons: !1,
@@ -222,26 +282,26 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
           onChange: this.onHueSliderChange,
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ariaLabel: e.toLanguageString(f, k[f])
+          ariaLabel: t.toLanguageString(E, x[E])
         }
-      ), this.props.opacity && /* @__PURE__ */ o.createElement(
-        m,
+      ), this.props.opacity && /* @__PURE__ */ r.createElement(
+        k,
         {
-          value: v(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
+          value: R(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
           buttons: !1,
           vertical: !0,
           min: 0,
           max: 100,
           step: 1,
-          ariaLabel: e.toLanguageString(S, k[S]),
+          ariaLabel: t.toLanguageString(H, x[H]),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ref: (t) => this.alphaSlider = t
+          ref: (e) => this.alphaSlider = e
         }
       ))),
-      /* @__PURE__ */ o.createElement(
-        j,
+      /* @__PURE__ */ r.createElement(
+        z,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -252,10 +312,10 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
           defaultInputMode: this.props.format
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ o.createElement(
-        W,
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(
+        q,
         {
-          bgColor: c(this.props.backgroundColor),
+          bgColor: p(this.props.backgroundColor),
           rgba: this.state.rgba
         }
       )
@@ -263,31 +323,31 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
   }
 };
 h.displayName = "ColorGradient", h.propTypes = {
-  defaultValue: i.string,
-  value: i.string,
-  onChange: i.func,
-  onFocus: i.func,
-  opacity: i.bool,
-  backgroundColor: i.string,
-  format: i.any,
-  disabled: i.bool,
-  style: i.any,
-  id: i.string,
-  role: i.string,
-  ariaLabel: i.string,
-  ariaLabelledBy: i.string,
-  ariaDescribedBy: i.string,
-  className: i.string
+  defaultValue: o.string,
+  value: o.string,
+  onChange: o.func,
+  onFocus: o.func,
+  opacity: o.bool,
+  backgroundColor: o.string,
+  format: o.any,
+  disabled: o.bool,
+  style: o.any,
+  id: o.string,
+  role: o.string,
+  ariaLabel: o.string,
+  ariaLabelledBy: o.string,
+  ariaDescribedBy: o.string,
+  className: o.string
 }, h.defaultProps = {
   opacity: !0,
   role: "textbox",
   format: "rgb"
 };
-let b = h;
-const z = D(), K = N(A(z, b));
-K.displayName = "KendoReactColorGradient";
+let f = h;
+const ee = M(), te = _(B(ee, f));
+te.displayName = "KendoReactColorGradient";
 export {
-  K as ColorGradient,
-  z as ColorGradientPropsContext,
-  b as ColorGradientWithoutContext
+  te as ColorGradient,
+  ee as ColorGradientPropsContext,
+  f as ColorGradientWithoutContext
 };

package/colors/ColorPalette.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),s=require("prop-types"),N=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),R=require("../package-metadata.js"),D=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js");function O(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const a=O(T),b=24,C=10,m="office",c=class c extends a.Component{constructor(t){super(t),this.wrapper=null,this.paletteService=null,this.focus=()=>{this.wrapper&&this.wrapper.focus()},this.onKeyDown=e=>{switch(e.keyCode){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})},r.validatePackage(R.packageMetadata),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 N.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),l=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?a.createElement("div",{id:this.props.id,role:"grid",className:l,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:h=>this.wrapper=h},a.createElement("table",{className:"k-colorpalette-table",role:"presentation"},a.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:L.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=D.PALETTEPRESETS[this.props.palette];return I.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||C}:{colors:[],columns:0}}else return{colors:this.props.palette||[],columns:this.props.columns||C}}renderRows(t,e,o){return t.map((i,l)=>a.createElement("tr",{role:"row",key:l},this.renderColumns(i,l,e,o)))}renderColumns(t,e,o,i){const l=o!==void 0&&o.row===e,h=o&&o.col,E=i!==void 0&&i.row===e,w=i&&i.col,f=typeof this.props.tileSize!="number"?this.props.tileSize:{width:this.props.tileSize,height:this.props.tileSize},g=f.width+"px",P=f.height+"px";return t.map((u,d)=>{const v=l&&h===d,k=r.classNames("k-colorpalette-tile",{"k-selected":v,"k-focus":E&&w===d});return a.createElement("td",{role:"gridcell",className:k,"aria-label":u,"aria-selected":v?!0:this.props.disabled?void 0:!1,style:{backgroundColor:u,width:g,height:P,minWidth:g},onClick:F=>this.onColorClick(u,F),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};c.displayName="ColorPalette",c.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},c.defaultProps={palette:m,tileSize:b};let p=c;const S=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(S,p));y.displayName="KendoReactColorPalette";exports.ColorPalette=y;exports.ColorPalettePropsContext=S;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=m;exports.DEFAULT_TILE_SIZE=b;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),s=require("prop-types"),T=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),N=require("../package-metadata.js"),D=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js");function O(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const l=O(F),v=24,u=10,S="office",c=class c 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})},r.validatePackage(N.packageMetadata),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 T.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),a=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?l.createElement("div",{id:this.props.id,role:"grid",className:a,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:L.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=D.PALETTEPRESETS[this.props.palette];return I.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||u}:{colors:[],columns:0}}else return{colors:this.props.palette||[],columns:this.props.columns||u}}renderRows(t,e,o){return t.map((i,a)=>l.createElement("tr",{role:"row",key:a},this.renderColumns(i,a,e,o)))}renderColumns(t,e,o,i){const a=o!==void 0&&o.row===e,E=o&&o.col,w=i!==void 0&&i.row===e,y=i&&i.col,f=typeof this.props.tileSize!="number"?this.props.tileSize:{width:this.props.tileSize,height:this.props.tileSize},C=f.width+"px",P=f.height+"px";return t.map((h,d)=>{const g=a&&E===d,k=r.classNames("k-colorpalette-tile",{"k-selected":g,"k-focus":w&&y===d});return l.createElement("td",{role:"gridcell",className:k,"aria-label":h,"aria-selected":g?!0:this.props.disabled?void 0:!1,style:{backgroundColor:h,width:C,height:P,minWidth:C},onClick:R=>this.onColorClick(h,R),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};c.displayName="ColorPalette",c.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},c.defaultProps={palette:S,tileSize:v};let p=c;const b=r.createPropsContext(),m=r.withIdHOC(r.withPropsContext(b,p));m.displayName="KendoReactColorPalette";exports.ColorPalette=m;exports.ColorPalettePropsContext=b;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=u;exports.DEFAULT_PRESET=S;exports.DEFAULT_TILE_SIZE=v;

package/colors/ColorPalette.mjs

@@ -6,20 +6,20 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as l from "react";
+import * as i from "react";
 import s from "prop-types";
 import { ColorPaletteService as E } from "./utils/color-palette.service.mjs";
-import { Keys as a, validatePackage as k, classNames as m, getTabIndex as F, dispatchEvent as N, createPropsContext as P, withIdHOC as R, withPropsContext as T } from "@progress/kendo-react-common";
+import { KEYS as a, validatePackage as k, classNames as C, getTabIndex as R, dispatchEvent as F, createPropsContext as N, withIdHOC as P, withPropsContext as T } from "@progress/kendo-react-common";
 import { packageMetadata as I } from "../package-metadata.mjs";
 import { PALETTEPRESETS as D } from "./models/palette-presets.mjs";
 import { isPresent as L } from "./utils/misc.mjs";
 import { parseColor as U } from "./utils/color-parser.mjs";
-const x = 24, g = 10, z = "office", n = class n extends l.Component {
+const x = 24, m = 10, z = "office", n = class n extends i.Component {
   constructor(t) {
-    super(t), this.wrapper = null, this.paletteService = null, this.focus = () => {
-      this.wrapper && this.wrapper.focus();
+    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.keyCode) {
+      switch (e.key) {
         case a.down:
           this.handleCellNavigation(0, 1);
           break;
@@ -62,23 +62,23 @@ const x = 24, g = 10, z = "office", n = class n extends l.Component {
   render() {
     const t = this.getPaletteInfo(), e = this.paletteService = new E();
     e.setColorMatrix(t.colors, t.columns);
-    const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor), i = m("k-colorpalette", { "k-disabled": this.props.disabled }, this.props.className);
-    return t.colors.length ? /* @__PURE__ */ l.createElement(
+    const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor), l = C("k-colorpalette", { "k-disabled": this.props.disabled }, this.props.className);
+    return t.colors.length ? /* @__PURE__ */ i.createElement(
       "div",
       {
         id: this.props.id,
         role: "grid",
-        className: i,
+        className: l,
         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: F(this.props.tabIndex, this.props.disabled),
-        ref: (d) => this.wrapper = d
+        tabIndex: R(this.props.tabIndex, this.props.disabled),
+        ref: this.wrapperRef
       },
-      /* @__PURE__ */ l.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ l.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
+      /* @__PURE__ */ i.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
     ) : "";
   }
   /**
@@ -110,7 +110,7 @@ const x = 24, g = 10, z = "office", n = class n extends l.Component {
     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: U(t, "rgba") });
+    F(this.props.onChange, e, this, { value: t, rgbaValue: U(t, "rgba") });
   }
   get focusedColorCooridanates() {
     return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
@@ -123,33 +123,33 @@ const x = 24, g = 10, z = "office", n = class n extends l.Component {
       const t = D[this.props.palette];
       return L(t) ? {
         colors: t.colors,
-        columns: this.props.columns || t.columns || g
+        columns: this.props.columns || t.columns || m
       } : { colors: [], columns: 0 };
     } else
-      return { colors: this.props.palette || [], columns: this.props.columns || g };
+      return { colors: this.props.palette || [], columns: this.props.columns || m };
   }
   renderRows(t, e, o) {
-    return t.map((r, i) => /* @__PURE__ */ l.createElement("tr", { role: "row", key: i }, this.renderColumns(r, i, e, o)));
+    return t.map((r, l) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: l }, this.renderColumns(r, l, e, o)));
   }
   renderColumns(t, e, o, r) {
-    const i = o !== void 0 && o.row === e, d = o && o.col, v = r !== void 0 && r.row === e, b = r && r.col, u = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, f = u.width + "px", S = u.height + "px";
-    return t.map((p, c) => {
-      const C = i && d === c, w = m(
+    const l = o !== void 0 && o.row === e, g = o && o.col, v = r !== void 0 && r.row === e, b = r && r.col, h = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, u = h.width + "px", S = h.height + "px";
+    return t.map((d, c) => {
+      const f = l && g === c, w = C(
         "k-colorpalette-tile",
         {
-          "k-selected": C,
+          "k-selected": f,
           "k-focus": v && b === c
         }
       );
-      return /* @__PURE__ */ l.createElement(
+      return /* @__PURE__ */ i.createElement(
         "td",
         {
           role: "gridcell",
           className: w,
-          "aria-label": p,
-          "aria-selected": C ? !0 : this.props.disabled ? void 0 : !1,
-          style: { backgroundColor: p, width: f, height: S, minWidth: f },
-          onClick: (y) => this.onColorClick(p, y),
+          "aria-label": d,
+          "aria-selected": f ? !0 : this.props.disabled ? void 0 : !1,
+          style: { backgroundColor: d, width: u, height: S, minWidth: u },
+          onClick: (y) => this.onColorClick(d, y),
           id: this.createCellId({ row: e, col: c }),
           key: c
         }
@@ -178,14 +178,14 @@ n.displayName = "ColorPalette", n.propTypes = {
   palette: z,
   tileSize: x
 };
-let h = n;
-const B = P(), A = R(T(B, h));
+let p = n;
+const B = N(), A = P(T(B, p));
 A.displayName = "KendoReactColorPalette";
 export {
   A as ColorPalette,
   B as ColorPalettePropsContext,
-  h as ColorPaletteWithoutContext,
-  g as DEFAULT_COLUMNS_COUNT,
+  p as ColorPaletteWithoutContext,
+  m as DEFAULT_COLUMNS_COUNT,
   z as DEFAULT_PRESET,
   x as DEFAULT_TILE_SIZE
 };