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

package/checkbox/Checkbox.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 ge=require("react"),e=require("prop-types"),o=require("@progress/kendo-react-common"),ye=require("@progress/kendo-react-intl"),I=require("../messages/index.js");function xe(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const r in s)if(r!=="default"){const p=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(u,r,p.get?p:{enumerable:!0,get:()=>s[r]})}}return u.default=s,Object.freeze(u)}const t=xe(ge),A=o.createPropsContext(),M=t.forwardRef((s,u)=>{const r=o.usePropsContext(A,s),{ariaDescribedBy:p,ariaLabelledBy:W,checked:O,className:G,labelClassName:J,children:Q,defaultChecked:X,disabled:n,defaultValue:Y,id:B,size:h=$.size,rounded:v=$.rounded,label:q,labelPlacement:z,name:Z,labelOptional:ee,onChange:C,onFocus:g,onBlur:y,tabIndex:te,value:i,required:k,valid:D,validationMessage:T,validityStyles:F,autoFocus:ae,visited:Pe,touched:Ve,modified:Ee,...ne}=r,l=t.useRef(null),K=t.useCallback(()=>{l.current&&l.current.focus()},[]),d=t.useCallback(()=>({element:l.current,focus:K,get name(){return l.current&&l.current.name}}),[K]);t.useImperativeHandle(u,d);const[oe,le]=t.useState(X),[ce,se]=t.useState(Y),R=typeof i=="boolean"||i===null,x=O!==void 0,b=R,P=b?i:ce,V=x?O:b?void 0:oe,w=V===void 0&&P,j=w?P:V,m=w||b?i===null?i:void 0:i||P,re=j===null||m===null,L=o.useId(),ie=ye.useLocalization(),_=a=>ie.toLanguageString(a,I.messages[a]),H=_(I.checkboxValidation),de=_(I.checkboxOptionalText),E=D!==void 0?D:k?!!V:!0;t.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(E?"":T||H)},[E,T,H]);const f=t.useCallback((a,c)=>{!b&&!n&&(se(c),!x&&!n&&le(c)),C&&!n&&o.dispatchEvent(C,a,{...d(),value:c},{value:c})},[x,n,C,b,d]),ue=t.useCallback(a=>{const c=a.target.checked;f(a,c)},[f,i]),be=t.useCallback(a=>{if(n)return;const{keyCode:c}=a,Ce=a.currentTarget.checked;c===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),f(a,!Ce))},[n,f]),pe=t.useCallback(a=>{if(n)return;const{keyCode:c}=a;c===o.Keys.space&&a.preventDefault()},[n]),ke=t.useCallback(a=>{g&&!n&&o.dispatchEvent(g,a,d(),void 0)},[g,n,d]),me=t.useCallback(a=>{y&&!n&&o.dispatchEvent(y,a,d(),void 0)},[y,n,d]),fe=o.useDir(l,r.dir),he=o.classNames("k-checkbox-wrap",G),U={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[h]||h}`]:h,[`k-rounded-${o.kendoThemeMaps.roundedMap[v]||v}`]:v,"k-indeterminate":re,"k-disabled":n,"k-invalid k-invalid":!(E||F!==void 0||F===!0)}),ref:l,name:Z,id:B||L,disabled:n,required:k!==void 0?k:!1,tabIndex:o.getTabIndex(te,n),role:"checkbox",checked:!!j,"aria-describedby":p,"aria-labelledby":W,"aria-disabled":n||void 0,"aria-required":k,autoFocus:ae,...ne,onChange:ue,onKeyDown:be,onKeyUp:pe,onFocus:ke,onBlur:me},ve=m===void 0?t.createElement("input",{...U}):t.createElement("input",{...U,value:R?void 0:m===null?"":m}),N=q!==void 0?t.createElement("label",{className:o.classNames("k-checkbox-label",J),htmlFor:B||L,style:{userSelect:"none"}},q,ee&&t.createElement("span",{className:"k-label-optional"},de)):null,S=t.createElement("span",{className:he},ve,Q);return t.createElement(t.Fragment,null,z==="before"?t.createElement("div",{dir:"rtl"},S,N):z==="after"?t.createElement("div",{dir:"ltr"},S,N):t.createElement("div",{dir:fe},S,N))});M.propTypes={checked:e.bool,className:e.string,defaultChecked:e.bool,defaultValue:e.any,dir:e.string,disabled:e.bool,id:e.string,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","none"]),ariaLabelledBy:e.string,ariaDescribedBy:e.string,label:e.any,labelPlacement:e.string,labelOptional:e.bool,name:e.string,tabIndex:e.number,value:e.any,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,autoFocus:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const $={size:void 0,rounded:void 0};M.displayName="KendoCheckbox";exports.Checkbox=M;exports.CheckboxPropsContext=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const xe=require("react"),e=require("prop-types"),o=require("@progress/kendo-react-common"),Pe=require("@progress/kendo-react-intl"),I=require("../messages/index.js");function Ve(c){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const r in c)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(c,r);Object.defineProperty(b,r,k.get?k:{enumerable:!0,get:()=>c[r]})}}return b.default=c,Object.freeze(b)}const t=Ve(xe),G=o.createPropsContext(),M=t.forwardRef((c,b)=>{const r=o.usePropsContext(G,c),{ariaDescribedBy:k,ariaLabelledBy:J,checked:O,className:Q,labelClassName:X,children:Y,defaultChecked:Z,disabled:n,defaultValue:ee,id:h,size:v=W.size,rounded:g=W.rounded,label:T,labelPlacement:q,name:z,labelOptional:te,onChange:C,onFocus:y,onBlur:x,tabIndex:ae,value:i,required:p,valid:D,validationMessage:F,validityStyles:K,autoFocus:ne,visited:Ee,touched:Ne,modified:Se,...oe}=r,l=t.useRef(null),R=t.useCallback(()=>{l.current&&l.current.focus()},[]),d=t.useCallback(()=>({element:l.current,focus:R,get name(){return l.current&&l.current.name}}),[R]);t.useImperativeHandle(b,d);const[le,se]=t.useState(Z),[ce,re]=t.useState(ee),w=typeof i=="boolean"||i===null,P=O!==void 0,m=w,V=m?i:ce,E=P?O:m?void 0:le,j=z||h,L=E===void 0&&V,_=L?V:E,f=L||m?i===null?i:void 0:i||V,ie=_===null||f===null,H=o.useId(),de=Pe.useLocalization(),U=a=>de.toLanguageString(a,I.messages[a]),$=U(I.checkboxValidation),ue=U(I.checkboxOptionalText),N=D!==void 0?D:p?!!E:!0;t.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(N?"":F||$)},[N,F,$]);const u=t.useCallback((a,s)=>{!m&&!n&&(re(s),!P&&!n&&se(s)),C&&!n&&o.dispatchEvent(C,a,{...d(),value:s},{value:s})},[P,n,C,m,d]),be=t.useCallback(a=>{const s={target:l.current,currentTarget:l.current};u(s,a)},[u]);o.useKendoPaste(l,{fieldName:j,onValueChange:be,enabled:!!j});const me=t.useCallback(a=>{const s=a.target.checked;u(a,s)},[u,i]),ke=t.useCallback(a=>{if(n)return;const{keyCode:s}=a,ye=a.currentTarget.checked;s===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),u(a,!ye))},[n,u]),pe=t.useCallback(a=>{if(n)return;const{keyCode:s}=a;s===o.Keys.space&&a.preventDefault()},[n]),fe=t.useCallback(a=>{y&&!n&&o.dispatchEvent(y,a,d(),void 0)},[y,n,d]),he=t.useCallback(a=>{x&&!n&&o.dispatchEvent(x,a,d(),void 0)},[x,n,d]),ve=o.useDir(l,r.dir),ge=o.classNames("k-checkbox-wrap",Q),A={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[v]||v}`]:v,[`k-rounded-${o.kendoThemeMaps.roundedMap[g]||g}`]:g,"k-indeterminate":ie,"k-disabled":n,"k-invalid k-invalid":!(N||K!==void 0||K===!0)}),ref:l,name:z,id:h||H,disabled:n,required:p!==void 0?p:!1,tabIndex:o.getTabIndex(ae,n),role:"checkbox",checked:!!_,"aria-describedby":k,"aria-labelledby":J,"aria-disabled":n||void 0,"aria-required":p,autoFocus:ne,...oe,onChange:me,onKeyDown:ke,onKeyUp:pe,onFocus:fe,onBlur:he},Ce=f===void 0?t.createElement("input",{...A}):t.createElement("input",{...A,value:w?void 0:f===null?"":f}),S=T!==void 0?t.createElement("label",{className:o.classNames("k-checkbox-label",X),htmlFor:h||H,style:{userSelect:"none"}},T,te&&t.createElement("span",{className:"k-label-optional"},ue)):null,B=t.createElement("span",{className:ge},Ce,Y);return t.createElement(t.Fragment,null,q==="before"?t.createElement("div",{dir:"rtl"},B,S):q==="after"?t.createElement("div",{dir:"ltr"},B,S):t.createElement("div",{dir:ve},B,S))});M.propTypes={checked:e.bool,className:e.string,defaultChecked:e.bool,defaultValue:e.any,dir:e.string,disabled:e.bool,id:e.string,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","none"]),ariaLabelledBy:e.string,ariaDescribedBy:e.string,label:e.any,labelPlacement:e.string,labelOptional:e.bool,name:e.string,tabIndex:e.number,value:e.any,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,autoFocus:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const W={size:void 0,rounded:void 0};M.displayName="KendoCheckbox";exports.Checkbox=M;exports.CheckboxPropsContext=G;

package/checkbox/Checkbox.mjs

@@ -5,47 +5,47 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
-import e from "prop-types";
-import { createPropsContext as ye, usePropsContext as xe, useId as Ve, dispatchEvent as V, Keys as H, useDir as Ee, classNames as E, getTabIndex as Pe, kendoThemeMaps as U } from "@progress/kendo-react-common";
-import { useLocalization as Be } from "@progress/kendo-react-intl";
-import { messages as Ie, checkboxValidation as Ne, checkboxOptionalText as ze } from "../messages/index.mjs";
-const Fe = ye(), $ = a.forwardRef((A, W) => {
-  const P = xe(Fe, A), {
-    ariaDescribedBy: j,
-    ariaLabelledBy: G,
-    checked: B,
-    className: J,
-    labelClassName: Q,
-    children: X,
-    defaultChecked: Y,
+import * as e from "react";
+import a from "prop-types";
+import { createPropsContext as Ve, usePropsContext as Pe, useId as Ee, dispatchEvent as P, useKendoPaste as Be, Keys as _, useDir as Ne, classNames as E, getTabIndex as Ie, kendoThemeMaps as $ } from "@progress/kendo-react-common";
+import { useLocalization as Fe } from "@progress/kendo-react-intl";
+import { messages as ze, checkboxValidation as Ke, checkboxOptionalText as Me } from "../messages/index.mjs";
+const Se = Ve(), W = e.forwardRef((j, G) => {
+  const B = Pe(Se, j), {
+    ariaDescribedBy: J,
+    ariaLabelledBy: Q,
+    checked: N,
+    className: X,
+    labelClassName: Y,
+    children: Z,
+    defaultChecked: ee,
     disabled: o,
-    defaultValue: Z,
-    id: I,
-    size: b = _.size,
-    rounded: m = _.rounded,
-    label: N,
-    labelPlacement: z,
-    name: ee,
-    labelOptional: ae,
-    onChange: p,
-    onFocus: k,
-    onBlur: f,
-    tabIndex: te,
+    defaultValue: ae,
+    id: b,
+    size: m = A.size,
+    rounded: p = A.rounded,
+    label: I,
+    labelPlacement: F,
+    name: z,
+    labelOptional: te,
+    onChange: k,
+    onFocus: f,
+    onBlur: h,
+    tabIndex: oe,
     value: s,
-    required: i,
-    valid: F,
+    required: d,
+    valid: K,
     validationMessage: M,
     validityStyles: S,
-    autoFocus: oe,
+    autoFocus: ne,
     // Removed to support direct use in Form Field component
-    visited: Me,
-    touched: Se,
-    modified: De,
-    ...ne
-  } = P, n = a.useRef(null), D = a.useCallback(() => {
+    visited: De,
+    touched: Te,
+    modified: we,
+    ...le
+  } = B, n = e.useRef(null), D = e.useCallback(() => {
     n.current && n.current.focus();
-  }, []), c = a.useCallback(
+  }, []), c = e.useCallback(
     () => ({
       element: n.current,
       focus: D,
@@ -55,15 +55,15 @@ const Fe = ye(), $ = a.forwardRef((A, W) => {
     }),
     [D]
   );
-  a.useImperativeHandle(W, c);
-  const [le, se] = a.useState(Y), [ce, re] = a.useState(Z), K = typeof s == "boolean" || s === null, h = B !== void 0, r = K, v = r ? s : ce, C = h ? B : r ? void 0 : le, T = C === void 0 && v, w = T ? v : C, d = T || r ? s === null ? s : void 0 : s || v, ie = w === null || d === null, L = Ve(), de = Be(), O = (t) => de.toLanguageString(t, Ie[t]), q = O(Ne), ue = O(ze), g = F !== void 0 ? F : i ? !!C : !0;
-  a.useEffect(() => {
-    n.current && n.current.setCustomValidity && n.current.setCustomValidity(g ? "" : M || q);
-  }, [g, M, q]);
-  const u = a.useCallback(
+  e.useImperativeHandle(G, c);
+  const [se, ce] = e.useState(ee), [re, ie] = e.useState(ae), T = typeof s == "boolean" || s === null, v = N !== void 0, i = T, C = i ? s : re, g = v ? N : i ? void 0 : se, w = z || b, L = g === void 0 && C, O = L ? C : g, u = L || i ? s === null ? s : void 0 : s || C, de = O === null || u === null, q = Ee(), ue = Fe(), R = (t) => ue.toLanguageString(t, ze[t]), H = R(Ke), be = R(Me), y = K !== void 0 ? K : d ? !!g : !0;
+  e.useEffect(() => {
+    n.current && n.current.setCustomValidity && n.current.setCustomValidity(y ? "" : M || H);
+  }, [y, M, H]);
+  const r = e.useCallback(
     (t, l) => {
-      !r && !o && (re(l), !h && !o && se(l)), p && !o && V(
-        p,
+      !i && !o && (ie(l), !v && !o && ce(l)), k && !o && P(
+        k,
         t,
         {
           ...c(),
@@ -72,116 +72,131 @@ const Fe = ye(), $ = a.forwardRef((A, W) => {
         { value: l }
       );
     },
-    [h, o, p, r, c]
-  ), be = a.useCallback(
+    [v, o, k, i, c]
+  ), me = e.useCallback(
+    (t) => {
+      const l = {
+        target: n.current,
+        currentTarget: n.current
+      };
+      r(l, t);
+    },
+    [r]
+  );
+  Be(n, {
+    fieldName: w,
+    onValueChange: me,
+    enabled: !!w
+  });
+  const pe = e.useCallback(
     (t) => {
       const l = t.target.checked;
-      u(t, l);
+      r(t, l);
     },
-    [u, s]
-  ), me = a.useCallback(
+    [r, s]
+  ), ke = e.useCallback(
     (t) => {
       if (o)
         return;
-      const { keyCode: l } = t, ge = t.currentTarget.checked;
-      l === H.space && (t.preventDefault(), t.stopPropagation(), u(t, !ge));
+      const { keyCode: l } = t, xe = t.currentTarget.checked;
+      l === _.space && (t.preventDefault(), t.stopPropagation(), r(t, !xe));
     },
-    [o, u]
-  ), pe = a.useCallback(
+    [o, r]
+  ), fe = e.useCallback(
     (t) => {
       if (o)
         return;
       const { keyCode: l } = t;
-      l === H.space && t.preventDefault();
+      l === _.space && t.preventDefault();
     },
     [o]
-  ), ke = a.useCallback(
+  ), he = e.useCallback(
     (t) => {
-      k && !o && V(k, t, c(), void 0);
+      f && !o && P(f, t, c(), void 0);
     },
-    [k, o, c]
-  ), fe = a.useCallback(
+    [f, o, c]
+  ), ve = e.useCallback(
     (t) => {
-      f && !o && V(f, t, c(), void 0);
+      h && !o && P(h, t, c(), void 0);
     },
-    [f, o, c]
-  ), he = Ee(n, P.dir), ve = E("k-checkbox-wrap", J), R = {
+    [h, o, c]
+  ), Ce = Ne(n, B.dir), ge = E("k-checkbox-wrap", X), U = {
     type: "checkbox",
     className: E("k-checkbox", {
-      [`k-checkbox-${U.sizeMap[b] || b}`]: b,
-      [`k-rounded-${U.roundedMap[m] || m}`]: m,
-      "k-indeterminate": ie,
+      [`k-checkbox-${$.sizeMap[m] || m}`]: m,
+      [`k-rounded-${$.roundedMap[p] || p}`]: p,
+      "k-indeterminate": de,
       "k-disabled": o,
-      "k-invalid k-invalid": !(g || S !== void 0 || S === !0)
+      "k-invalid k-invalid": !(y || S !== void 0 || S === !0)
     }),
     ref: n,
-    name: ee,
-    id: I || L,
+    name: z,
+    id: b || q,
     disabled: o,
-    required: i !== void 0 ? i : !1,
-    tabIndex: Pe(te, o),
+    required: d !== void 0 ? d : !1,
+    tabIndex: Ie(oe, o),
     role: "checkbox",
-    checked: !!w,
-    "aria-describedby": j,
-    "aria-labelledby": G,
+    checked: !!O,
+    "aria-describedby": J,
+    "aria-labelledby": Q,
     "aria-disabled": o || void 0,
-    "aria-required": i,
-    autoFocus: oe,
-    ...ne,
-    onChange: be,
-    onKeyDown: me,
-    onKeyUp: pe,
-    onFocus: ke,
-    onBlur: fe
-  }, Ce = (
+    "aria-required": d,
+    autoFocus: ne,
+    ...le,
+    onChange: pe,
+    onKeyDown: ke,
+    onKeyUp: fe,
+    onFocus: he,
+    onBlur: ve
+  }, ye = (
     // removing value prop is required due to bug in react where
     // value set to undefined override default submit value
-    d === void 0 ? /* @__PURE__ */ a.createElement("input", { ...R }) : /* @__PURE__ */ a.createElement("input", { ...R, value: K ? void 0 : d === null ? "" : d })
-  ), y = N !== void 0 ? /* @__PURE__ */ a.createElement(
+    u === void 0 ? /* @__PURE__ */ e.createElement("input", { ...U }) : /* @__PURE__ */ e.createElement("input", { ...U, value: T ? void 0 : u === null ? "" : u })
+  ), x = I !== void 0 ? /* @__PURE__ */ e.createElement(
     "label",
     {
-      className: E("k-checkbox-label", Q),
-      htmlFor: I || L,
+      className: E("k-checkbox-label", Y),
+      htmlFor: b || q,
       style: { userSelect: "none" }
     },
-    N,
-    ae && /* @__PURE__ */ a.createElement("span", { className: "k-label-optional" }, ue)
-  ) : null, x = /* @__PURE__ */ a.createElement("span", { className: ve }, Ce, X);
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, z === "before" ? /* @__PURE__ */ a.createElement("div", { dir: "rtl" }, x, y) : z === "after" ? /* @__PURE__ */ a.createElement("div", { dir: "ltr" }, x, y) : /* @__PURE__ */ a.createElement("div", { dir: he }, x, y));
+    I,
+    te && /* @__PURE__ */ e.createElement("span", { className: "k-label-optional" }, be)
+  ) : null, V = /* @__PURE__ */ e.createElement("span", { className: ge }, ye, Z);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, F === "before" ? /* @__PURE__ */ e.createElement("div", { dir: "rtl" }, V, x) : F === "after" ? /* @__PURE__ */ e.createElement("div", { dir: "ltr" }, V, x) : /* @__PURE__ */ e.createElement("div", { dir: Ce }, V, x));
 });
-$.propTypes = {
-  checked: e.bool,
-  className: e.string,
-  defaultChecked: e.bool,
-  defaultValue: e.any,
-  dir: e.string,
-  disabled: e.bool,
-  id: e.string,
-  size: e.oneOf(["small", "medium", "large"]),
-  rounded: e.oneOf(["small", "medium", "large", "none"]),
-  ariaLabelledBy: e.string,
-  ariaDescribedBy: e.string,
-  label: e.any,
-  labelPlacement: e.string,
-  labelOptional: e.bool,
-  name: e.string,
-  tabIndex: e.number,
-  value: e.any,
-  validationMessage: e.string,
-  required: e.bool,
-  validate: e.bool,
-  valid: e.bool,
-  autoFocus: e.bool,
-  onChange: e.func,
-  onFocus: e.func,
-  onBlur: e.func
+W.propTypes = {
+  checked: a.bool,
+  className: a.string,
+  defaultChecked: a.bool,
+  defaultValue: a.any,
+  dir: a.string,
+  disabled: a.bool,
+  id: a.string,
+  size: a.oneOf(["small", "medium", "large"]),
+  rounded: a.oneOf(["small", "medium", "large", "none"]),
+  ariaLabelledBy: a.string,
+  ariaDescribedBy: a.string,
+  label: a.any,
+  labelPlacement: a.string,
+  labelOptional: a.bool,
+  name: a.string,
+  tabIndex: a.number,
+  value: a.any,
+  validationMessage: a.string,
+  required: a.bool,
+  validate: a.bool,
+  valid: a.bool,
+  autoFocus: a.bool,
+  onChange: a.func,
+  onFocus: a.func,
+  onBlur: a.func
 };
-const _ = {
+const A = {
   size: void 0,
   rounded: void 0
 };
-$.displayName = "KendoCheckbox";
+W.displayName = "KendoCheckbox";
 export {
-  $ as Checkbox,
-  Fe as CheckboxPropsContext
+  W as Checkbox,
+  Se as CheckboxPropsContext
 };

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;