@progress/kendo-react-inputs 7.2.4-develop.3 → 7.3.0-develop.1

package/colors/ColorInput.mjs

@@ -0,0 +1,122 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import { NumericTextBox as g } from "../numerictextbox/NumericTextBox.mjs";
+import b from "./HexInput.mjs";
+import { Button as u } from "@progress/kendo-react-buttons";
+import { Label as o } from "@progress/kendo-react-labels";
+import { caretAltExpandIcon as f } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as x, registerForIntl as k, registerForLocalization as v } from "@progress/kendo-react-intl";
+import { colorGradientR as n, messages as r, colorGradientHex as C, colorGradientG as E, colorGradientB as M, colorGradientA as R, colorGradientToggleInputsButton as l } from "../messages/index.mjs";
+const i = ["rgba", "rgb", "hex"];
+class p extends t.Component {
+  constructor(e) {
+    super(e), this.onRgbaRChange = (a) => {
+      this.dispatchRgbaChange({ r: a.value }, a);
+    }, this.onRgbaGChange = (a) => {
+      this.dispatchRgbaChange({ g: a.value }, a);
+    }, this.onRgbaBChange = (a) => {
+      this.dispatchRgbaChange({ b: a.value }, a);
+    }, this.onRgbaAChange = (a) => {
+      this.dispatchRgbaChange({ a: a.value }, a);
+    }, this.state = { inputMode: e.defaultInputMode || i[1] };
+  }
+  render() {
+    const e = x(this), a = e.toLanguageString(n, r[C]), s = e.toLanguageString(n, r[n]), c = e.toLanguageString(n, r[E]), h = e.toLanguageString(n, r[M]), d = e.toLanguageString(n, r[R]), m = e.toLanguageString(l, r[l]);
+    return /* @__PURE__ */ t.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
+      u,
+      {
+        "aria-label": m,
+        fillMode: "flat",
+        icon: "caret-alt-expand",
+        svgIcon: f,
+        className: "k-colorgradient-toggle-mode k-icon-button",
+        onClick: this.onToggleModeChange.bind(this)
+      }
+    )), this.state.inputMode === "hex" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ t.createElement("span", { className: "k-hex-value k-textbox k-input" }, /* @__PURE__ */ t.createElement(
+      b,
+      {
+        hex: this.props.hex,
+        onHexChange: this.props.onHexChange,
+        disabled: this.props.disabled
+      }
+    )), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, a)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
+      g,
+      {
+        inputType: "number",
+        value: this.props.rgba.r,
+        ariaLabel: String(this.props.rgba.r),
+        min: 0,
+        max: 255,
+        spinners: !1,
+        format: "n",
+        onChange: this.onRgbaRChange,
+        disabled: this.props.disabled
+      }
+    ), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
+      g,
+      {
+        inputType: "number",
+        value: this.props.rgba.g,
+        ariaLabel: String(this.props.rgba.g),
+        min: 0,
+        max: 255,
+        spinners: !1,
+        format: "n",
+        onChange: this.onRgbaGChange,
+        disabled: this.props.disabled
+      }
+    ), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, c)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
+      g,
+      {
+        inputType: "number",
+        value: this.props.rgba.b,
+        ariaLabel: String(this.props.rgba.b),
+        min: 0,
+        max: 255,
+        spinners: !1,
+        format: "n",
+        onChange: this.onRgbaBChange,
+        disabled: this.props.disabled
+      }
+    ), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, h))), this.state.inputMode === "rgba" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ t.createElement(
+      g,
+      {
+        inputType: "number",
+        value: this.props.rgba.a,
+        ariaLabel: String(this.props.rgba.a),
+        min: 0,
+        max: 1,
+        step: 0.01,
+        spinners: !1,
+        format: "n2",
+        onChange: this.onRgbaAChange,
+        disabled: this.props.disabled
+      }
+    ), this.props.opacity && /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, d)));
+  }
+  dispatchRgbaChange(e, a) {
+    let s = { ...this.props.rgba };
+    e.r !== void 0 && (s.r = e.r), e.g !== void 0 && (s.g = e.g), e.b !== void 0 && (s.b = e.b), e.a !== void 0 && (s.a = e.a), this.props.onRgbaChange(s, a);
+  }
+  onToggleModeChange() {
+    const e = i.length - 1 === i.indexOf(this.state.inputMode) ? 0 : i.indexOf(this.state.inputMode) + 1;
+    if (this.props.opacity)
+      this.setState({ inputMode: i[e] });
+    else {
+      const a = i[e] === "rgba" ? e + 1 : e;
+      this.setState({ inputMode: i[a] });
+    }
+  }
+}
+k(p);
+v(p);
+export {
+  p as default
+};

package/colors/ColorPalette.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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,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;

package/colors/ColorPalette.mjs

@@ -0,0 +1,191 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as l 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 { 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 {
+  constructor(t) {
+    super(t), this.wrapper = null, this.paletteService = null, this.focus = () => {
+      this.wrapper && this.wrapper.focus();
+    }, this.onKeyDown = (e) => {
+      switch (e.keyCode) {
+        case a.down:
+          this.handleCellNavigation(0, 1);
+          break;
+        case a.up:
+          this.handleCellNavigation(0, -1);
+          break;
+        case a.right:
+          this.handleCellNavigation(1, 0);
+          break;
+        case a.left:
+          this.handleCellNavigation(-1, 0);
+          break;
+        case a.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 });
+    }, k(I), this.state = {
+      selectedColor: this.props.value !== void 0 ? this.props.value : this.props.defaultValue,
+      isFirstRender: !0
+    };
+  }
+  get guid() {
+    return this.props.id;
+  }
+  /**
+   * @hidden
+   */
+  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(
+      "div",
+      {
+        id: this.props.id,
+        role: "grid",
+        className: i,
+        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
+      },
+      /* @__PURE__ */ l.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ l.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: U(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[this.props.palette];
+      return L(t) ? {
+        colors: t.colors,
+        columns: this.props.columns || t.columns || g
+      } : { colors: [], columns: 0 };
+    } else
+      return { colors: this.props.palette || [], columns: this.props.columns || g };
+  }
+  renderRows(t, e, o) {
+    return t.map((r, i) => /* @__PURE__ */ l.createElement("tr", { role: "row", key: i }, this.renderColumns(r, i, 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(
+        "k-colorpalette-tile",
+        {
+          "k-selected": C,
+          "k-focus": v && b === c
+        }
+      );
+      return /* @__PURE__ */ l.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),
+          id: this.createCellId({ row: e, col: c }),
+          key: c
+        }
+      );
+    });
+  }
+  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
+}, n.defaultProps = {
+  palette: z,
+  tileSize: x
+};
+let h = n;
+const B = P(), A = R(T(B, h));
+A.displayName = "KendoReactColorPalette";
+export {
+  A as ColorPalette,
+  B as ColorPalettePropsContext,
+  h as ColorPaletteWithoutContext,
+  g as DEFAULT_COLUMNS_COUNT,
+  z as DEFAULT_PRESET,
+  x as DEFAULT_TILE_SIZE
+};

package/colors/ColorPicker.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 ce=require("react"),a=require("prop-types"),n=require("@progress/kendo-react-common"),ie=require("../package-metadata.js"),ue=require("./Picker.js"),de=require("./ColorGradient.js"),M=require("./ColorPalette.js"),pe=require("@progress/kendo-react-buttons"),fe=require("@progress/kendo-svg-icons"),A=require("../messages/index.js"),me=require("@progress/kendo-react-intl");function ke(l){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const o in l)if(o!=="default"){const k=Object.getOwnPropertyDescriptor(l,o);Object.defineProperty(m,o,k.get?k:{enumerable:!0,get:()=>l[o]})}}return m.default=l,Object.freeze(m)}const e=ke(ce),be={opacity:!0},ge={palette:M.DEFAULT_PRESET,tileSize:M.DEFAULT_TILE_SIZE},B=l=>l!==void 0,z=n.createPropsContext(),C=e.forwardRef((l,m)=>{n.validatePackage(ie.packageMetadata);const o=n.usePropsContext(z,l),k=me.useLocalization(),{size:E=v.size,rounded:y=v.rounded,fillMode:q=v.fillMode,popupSettings:F,gradientSettings:H,paletteSettings:V,valid:j,disabled:P,tabIndex:G,view:b,icon:T,svgIcon:S,iconClassName:g,onChange:w,onFocus:I,onBlur:R,onActiveColorClick:D,className:U}=o,r=e.useRef(null),N=e.useRef(null),O=e.useRef(null),d=e.useRef(),$=e.useRef(null),[W,x]=e.useState(!1),[Z,J]=e.useState(o.defaultValue),[Q,X]=e.useState(!1),h=B(o.value),i=B(o.open),c=h?o.value:Z,p=i?o.open:Q,K=e.useCallback(()=>{r.current&&r.current.focus()},[]);e.useImperativeHandle(m,()=>({element:r.current,actionElement:$.current,value:c,focus:K}),[c,K]);const u=e.useCallback((t,f)=>{i||(!t&&!f&&r&&r.current&&r.current.focus(),X(t))},[i]),Y=e.useCallback(t=>{const{altKey:f,keyCode:s}=t;if(s===n.Keys.esc){u(!1);return}if(s===n.Keys.enter&&!i){t.preventDefault(),t.stopPropagation(),u(!p);return}f&&(s===n.Keys.up||s===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),s===n.Keys.up&&r&&r.current&&(r.current.focus(),u(!1)),s===n.Keys.down&&u(!0))},[p,i]),ee=e.useCallback(()=>{i||(N.current?N.current.focus():O.current&&O.current.focus())},[i]),te=e.useCallback(()=>{u(!p,!0)},[p]),ne=e.useCallback(t=>{D&&D.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:c})},[D,c]),oe=e.useCallback(t=>{d.current?(clearTimeout(d.current),d.current=void 0):x(!0),I&&I.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[I]),ae=e.useCallback(()=>{u(!1,!0),x(!1),d.current=void 0},[]),re=e.useCallback(t=>{clearTimeout(d.current),d.current=window.setTimeout(ae),R&&R.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[R]),L=e.useCallback((t,f)=>{const s=f?t.rgbaValue:t.value;h||J(s),f&&u(!1),w&&w.call(void 0,{value:s,nativeEvent:t.nativeEvent,syntheticEvent:t.syntheticEvent})},[h,w]),le=e.useCallback(t=>L(t,!0),[B,L]),_=n.useDir(r,o.dir),se=j!==!1;return e.createElement("span",{id:o.id,role:"combobox","aria-label":o.ariaLabel,"aria-labelledby":o.ariaLabelledBy,"aria-describedby":o.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":p,"aria-disabled":P?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[E]||E}`]:E,[`k-picker-${q}`]:q,[`k-rounded-${n.kendoThemeMaps.roundedMap[y]||y}`]:y,"k-invalid":!se,"k-disabled":P,"k-focus":W,className:U}),ref:r,tabIndex:n.getTabIndex(G,P),title:o.title,onKeyDown:Y,onFocus:oe,onBlur:re,dir:_},e.createElement(ue.Picker,{dir:_,open:p,onOpen:ee,popupAnchor:r.current||void 0,popupSettings:{...F},input:e.createElement("span",{onClick:ne,className:"k-input-inner"},e.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!c,"k-icon-color-preview":T||S||g})},g&&e.createElement("span",{className:n.classNames("k-color-preview-icon",g)}),!g&&(T||S)&&e.createElement(n.IconWrap,{name:T,icon:S}),e.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:c}}))),button:e.createElement(pe.Button,{tabIndex:-1,type:"button",onClick:te,className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:fe.caretAltDownIcon,"aria-label":k.toLanguageString(A.colorPickerDropdownButtonAriaLabel,A.messages[A.colorPickerDropdownButtonAriaLabel])}),content:e.createElement(e.Fragment,null,(b==="combo"||b==="gradient")&&e.createElement(de.ColorGradient,{...H,tabIndex:0,ref:N,value:c,onChange:L}),(b==="combo"||b==="palette")&&e.createElement(M.ColorPalette,{...V,ref:O,value:c,onChange:le}))}))});C.propTypes={value:a.string,defaultValue:a.string,disabled:a.bool,view:a.oneOf(["gradient","palette","combo"]),dir:a.string,id:a.string,icon:a.string,svgIcon:n.svgIconPropType,ariaLabelledBy:a.string,ariaDescribedBy:a.string,size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large","full"]),fillMode:a.oneOf([null,"solid","flat","outline"]),className:a.string};const v={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",gradientSettings:be,paletteSettings:ge};C.defaultProps=v;C.displayName="KendoColorPicker";exports.ColorPicker=C;exports.ColorPickerPropsContext=z;

package/colors/ColorPicker.mjs

@@ -0,0 +1,253 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import n from "prop-types";
+import { createPropsContext as se, validatePackage as ce, usePropsContext as ue, Keys as p, useDir as de, classNames as h, kendoThemeMaps as O, getTabIndex as pe, IconWrap as fe, svgIconPropType as me } from "@progress/kendo-react-common";
+import { packageMetadata as ke } from "../package-metadata.mjs";
+import { Picker as be } from "./Picker.mjs";
+import { ColorGradient as ve } from "./ColorGradient.mjs";
+import { ColorPalette as ge, DEFAULT_PRESET as Ee, DEFAULT_TILE_SIZE as Ce } from "./ColorPalette.mjs";
+import { Button as ye } from "@progress/kendo-react-buttons";
+import { caretAltDownIcon as Te } from "@progress/kendo-svg-icons";
+import { colorPickerDropdownButtonAriaLabel as z, messages as Se } from "../messages/index.mjs";
+import { useLocalization as Pe } from "@progress/kendo-react-intl";
+const we = {
+  opacity: !0
+}, Ie = {
+  palette: Ee,
+  tileSize: Ce
+}, L = (b) => b !== void 0, De = se(), A = e.forwardRef((b, M) => {
+  ce(ke);
+  const o = ue(De, b), V = Pe(), {
+    size: v = k.size,
+    rounded: g = k.rounded,
+    fillMode: x = k.fillMode,
+    popupSettings: _,
+    gradientSettings: K,
+    paletteSettings: G,
+    valid: U,
+    disabled: E,
+    tabIndex: $,
+    view: f,
+    icon: C,
+    svgIcon: y,
+    iconClassName: m,
+    onChange: T,
+    onFocus: S,
+    onBlur: P,
+    onActiveColorClick: w,
+    className: W
+  } = o, a = e.useRef(null), I = e.useRef(null), D = e.useRef(null), c = e.useRef(), Z = e.useRef(null), [j, B] = e.useState(!1), [q, J] = e.useState(o.defaultValue), [Q, X] = e.useState(!1), N = L(o.value), i = L(o.open), l = N ? o.value : q, u = i ? o.open : Q, F = e.useCallback(
+    () => {
+      a.current && a.current.focus();
+    },
+    []
+  );
+  e.useImperativeHandle(M, () => ({
+    // we agreed that each element will have focus method exposed
+    element: a.current,
+    actionElement: Z.current,
+    value: l,
+    focus: F
+  }), [l, F]);
+  const s = e.useCallback(
+    (t, d) => {
+      i || (!t && !d && a && a.current && a.current.focus(), X(t));
+    },
+    [i]
+  ), Y = e.useCallback(
+    (t) => {
+      const { altKey: d, keyCode: r } = t;
+      if (r === p.esc) {
+        s(!1);
+        return;
+      }
+      if (r === p.enter && !i) {
+        t.preventDefault(), t.stopPropagation(), s(!u);
+        return;
+      }
+      d && (r === p.up || r === p.down) && (t.preventDefault(), t.stopPropagation(), r === p.up && a && a.current && (a.current.focus(), s(!1)), r === p.down && s(!0));
+    },
+    [u, i]
+  ), ee = e.useCallback(
+    () => {
+      i || (I.current ? I.current.focus() : D.current && D.current.focus());
+    },
+    [i]
+  ), te = e.useCallback(
+    () => {
+      s(!u, !0);
+    },
+    [u]
+  ), ne = e.useCallback(
+    (t) => {
+      w && w.call(void 0, {
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent,
+        value: l
+      });
+    },
+    [w, l]
+  ), oe = e.useCallback(
+    (t) => {
+      c.current ? (clearTimeout(c.current), c.current = void 0) : B(!0), S && S.call(void 0, {
+        nativeEvent: t.nativeEvent,
+        syntheticEvent: t
+      });
+    },
+    [S]
+  ), ae = e.useCallback(
+    () => {
+      s(!1, !0), B(!1), c.current = void 0;
+    },
+    []
+  ), re = e.useCallback(
+    (t) => {
+      clearTimeout(c.current), c.current = window.setTimeout(ae), P && P.call(void 0, {
+        nativeEvent: t.nativeEvent,
+        syntheticEvent: t
+      });
+    },
+    [P]
+  ), R = e.useCallback(
+    (t, d) => {
+      const r = d ? t.rgbaValue : t.value;
+      N || J(r), d && s(!1), T && T.call(void 0, {
+        value: r,
+        nativeEvent: t.nativeEvent,
+        syntheticEvent: t.syntheticEvent
+      });
+    },
+    [N, T]
+  ), le = e.useCallback(
+    (t) => R(t, !0),
+    [L, R]
+  ), H = de(a, o.dir), ie = U !== !1;
+  return /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      id: o.id,
+      role: "combobox",
+      "aria-label": o.ariaLabel,
+      "aria-labelledby": o.ariaLabelledBy,
+      "aria-describedby": o.ariaDescribedBy,
+      "aria-haspopup": "dialog",
+      "aria-expanded": u,
+      "aria-disabled": E ? "true" : void 0,
+      className: h(
+        "k-colorpicker",
+        "k-picker",
+        "k-icon-picker",
+        {
+          [`k-picker-${O.sizeMap[v] || v}`]: v,
+          [`k-picker-${x}`]: x,
+          [`k-rounded-${O.roundedMap[g] || g}`]: g,
+          "k-invalid": !ie,
+          "k-disabled": E,
+          "k-focus": j,
+          className: W
+        }
+      ),
+      ref: a,
+      tabIndex: pe($, E),
+      title: o.title,
+      onKeyDown: Y,
+      onFocus: oe,
+      onBlur: re,
+      dir: H
+    },
+    /* @__PURE__ */ e.createElement(
+      be,
+      {
+        dir: H,
+        open: u,
+        onOpen: ee,
+        popupAnchor: a.current || void 0,
+        popupSettings: { ..._ },
+        input: /* @__PURE__ */ e.createElement("span", { onClick: ne, className: "k-input-inner" }, /* @__PURE__ */ e.createElement(
+          "span",
+          {
+            className: h(
+              "k-value-icon",
+              "k-color-preview",
+              {
+                "k-no-color": !l,
+                "k-icon-color-preview": C || y || m
+              }
+            )
+          },
+          m && /* @__PURE__ */ e.createElement("span", { className: h("k-color-preview-icon", m) }),
+          !m && (C || y) && /* @__PURE__ */ e.createElement(fe, { name: C, icon: y }),
+          /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
+        )),
+        button: /* @__PURE__ */ e.createElement(
+          ye,
+          {
+            tabIndex: -1,
+            type: "button",
+            onClick: te,
+            className: "k-input-button",
+            rounded: null,
+            icon: "caret-alt-down",
+            svgIcon: Te,
+            "aria-label": V.toLanguageString(z, Se[z])
+          }
+        ),
+        content: /* @__PURE__ */ e.createElement(e.Fragment, null, (f === "combo" || f === "gradient") && /* @__PURE__ */ e.createElement(
+          ve,
+          {
+            ...K,
+            tabIndex: 0,
+            ref: I,
+            value: l,
+            onChange: R
+          }
+        ), (f === "combo" || f === "palette") && /* @__PURE__ */ e.createElement(
+          ge,
+          {
+            ...G,
+            ref: D,
+            value: l,
+            onChange: le
+          }
+        ))
+      }
+    )
+  );
+});
+A.propTypes = {
+  value: n.string,
+  defaultValue: n.string,
+  disabled: n.bool,
+  view: n.oneOf(["gradient", "palette", "combo"]),
+  dir: n.string,
+  id: n.string,
+  icon: n.string,
+  svgIcon: me,
+  ariaLabelledBy: n.string,
+  ariaDescribedBy: n.string,
+  size: n.oneOf([null, "small", "medium", "large"]),
+  rounded: n.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: n.oneOf([null, "solid", "flat", "outline"]),
+  className: n.string
+};
+const k = {
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  view: "palette",
+  gradientSettings: we,
+  paletteSettings: Ie
+};
+A.defaultProps = k;
+A.displayName = "KendoColorPicker";
+export {
+  A as ColorPicker,
+  De as ColorPickerPropsContext
+};

package/colors/FlatColorPicker.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 j=require("react"),l=require("prop-types"),m=require("@progress/kendo-react-common"),d=require("@progress/kendo-react-buttons"),h=require("@progress/kendo-svg-icons"),_=require("./ColorPalette.js"),z=require("./ColorGradient.js"),D=require("../package-metadata.js"),H=require("@progress/kendo-react-intl"),n=require("../messages/index.js");function A(e){const v=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(v,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return v.default=e,Object.freeze(v)}const t=A(j),S="rgba(255, 255, 255, 1)",y=t.forwardRef((e,v)=>{m.validatePackage(D.packageMetadata);const o=t.useRef(null),r=t.useRef(null),G=t.useRef(null),{defaultValue:s=S,showButtons:k=!0,showPreview:R=!0,showClearButton:q=!0}=e,[u,L]=t.useState((e.view||"ColorGradient")==="ColorGradient"),[c,g]=t.useState(e.value||s),[C,b]=t.useState(e.value||s),E=e.value!==void 0?e.value:C;t.useEffect(()=>{g(e.value||s)},[e.value,s]);const f=H.useLocalization(),P=t.useCallback(()=>{o.current&&o.current.focus()},[o]);t.useImperativeHandle(o,()=>({element:r.current,focus:P,props:e,value:E}),[E,P,e]),t.useImperativeHandle(v,()=>o.current);const w=t.useCallback(a=>{(a==="ColorGradient"&&!u||a==="ColorPalette"&&u)&&L(!u)},[u]),x=t.useCallback(a=>{if(g(s),e.onPreviewChange){const i={value:s,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,i)}},[s,e.onPreviewChange]),B=t.useCallback(a=>{if(g(a.value),e.onPreviewChange){const i={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,i)}},[e.onPreviewChange]),F=t.useCallback(a=>{if(b(c),e.onChange){const i={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,i)}},[c,e.onChange]),M=t.useCallback(()=>{b(S)},[]),T=t.useCallback(a=>{if(g(C),e.onPreviewChange){const i={value:C,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,i)}},[C,e.onPreviewChange]),N=t.useCallback(a=>{r.current&&!(a.nativeEvent.target instanceof HTMLInputElement)&&r.current.focus()},[r]),V=t.useCallback(a=>{var I;if((!a.relatedTarget||!((I=r.current)!=null&&I.contains(a.relatedTarget)))&&(k||b(c),!k&&e.onChange)){const O={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,O)}},[c,k,e.onChange]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:e.style,ref:r,tabIndex:m.getTabIndex(e.tabIndex,e.disabled),className:m.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":e.disabled},e.className),onBlur:V},t.createElement(t.Fragment,null,e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},t.createElement(d.ButtonGroup,{className:"k-button-group-flat"},t.createElement(d.Button,{type:"button","aria-label":f.toLanguageString(n.flatColorPickerColorGradientBtn,n.messages[n.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",selected:u,onClick:()=>w("ColorGradient"),icon:"droplet-slider",svgIcon:h.dropletSliderIcon}),t.createElement(d.Button,{type:"button","aria-label":f.toLanguageString(n.flatColorPickerColorPaletteBtn,n.messages[n.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",selected:!u,onClick:()=>w("ColorPalette"),icon:"palette",svgIcon:h.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},q&&t.createElement(d.Button,{type:"button",fillMode:"flat",onClick:x,"aria-label":f.toLanguageString(n.flatColorPickerClearBtn,n.messages[n.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:h.dropletSlashIcon}),R&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:"k-coloreditor-preview-color k-color-preview",style:{background:c}}),t.createElement("span",{className:"k-coloreditor-current-color k-color-preview",style:{background:C},onClick:T})))),t.createElement("div",{className:"k-coloreditor-views k-vstack"},u?t.createElement(z.ColorGradient,{ref:G,role:"none",tabIndex:-1,ariaLabel:void 0,value:c,onChange:B,onFocus:N,opacity:e.opacity,format:e.format}):t.createElement(_.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:B,onFocus:N})),k&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end"},t.createElement(d.Button,{type:"button",className:"k-coloreditor-cancel",onClick:M},n.messages[n.flatColorPickerCancelBtn]),t.createElement(d.Button,{type:"button",className:"k-coloreditor-apply k-primary",onClick:F},n.messages[n.flatColorPickerApplyBtn]))))}),K={id:l.string,style:l.any,className:l.string,value:l.string,defaultValue:l.string,onPreviewChange:l.func,onChange:l.func,opacity:l.bool,format:l.any,tabIndex:l.number,ariaLabel:l.string,ariaLabelledBy:l.string,disabled:l.bool,view:l.any,header:l.any,showClearButton:l.bool,showPreview:l.bool,showButtons:l.bool};y.displayName="KendoFlatColorPicker";y.propTypes=K;exports.FlatColorPicker=y;