@progress/kendo-react-inputs 10.1.0-develop.8 → 10.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -7
- package/colors/ColorPalette.js +1 -1
- package/colors/ColorPalette.mjs +37 -30
- package/colors/ColorPicker.js +1 -1
- package/colors/ColorPicker.mjs +41 -40
- package/colors/FlatColorPicker.js +1 -1
- package/colors/FlatColorPicker.mjs +2 -1
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/index.d.mts +4 -0
- package/index.d.ts +4 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -9
package/README.md
CHANGED
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
>
|
|
7
7
|
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—an enterprise-grade UI library with 120+ free and premium components.
|
|
8
8
|
> - It contains both free and premium KendoReact components and tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs). You can use the free components without having to sign up or get a license key.
|
|
9
|
-
> -
|
|
10
|
-
> -
|
|
11
|
-
> -
|
|
9
|
+
> - If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
|
|
10
|
+
> - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) to learn how to configure your KendoReact licensing.
|
|
11
|
+
> - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs).
|
|
12
12
|
> - The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
|
|
13
13
|
>
|
|
14
14
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) and speed up your development process!
|
|
@@ -18,10 +18,9 @@ The React Inputs, part of KendoReact, offer a highly customizable interface for
|
|
|
18
18
|
How to start:
|
|
19
19
|
|
|
20
20
|
```sh
|
|
21
|
-
npm
|
|
21
|
+
npm i @progress/kendo-react-inputs
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
|
|
25
24
|
What's in this package (ToC):
|
|
26
25
|
|
|
27
26
|
- [React Inputs Components Library Features](#react-inputs-components-library-features)
|
|
@@ -42,8 +41,8 @@ What's in this package (ToC):
|
|
|
42
41
|
- [React Switch Component (free)](#react-switch-component)
|
|
43
42
|
- [React TextArea Component (free)](#react-textarea-component)
|
|
44
43
|
- [React TextBox Component (free)](#react-textbox-component)
|
|
45
|
-
|
|
46
|
-
Additional information:
|
|
44
|
+
|
|
45
|
+
Additional information:
|
|
47
46
|
|
|
48
47
|
- [Support Options](#support-options)
|
|
49
48
|
- [Resources](#resources)
|
package/colors/ColorPalette.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"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,S="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,b=o&&o.col,E=i!==void 0&&i.row===e,w=i&&i.col;return t.map((h,d)=>{const f=c&&b===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:S,tileSize:g,size:"medium"};let p=n;const m=r.createPropsContext(),v=r.withIdHOC(r.withPropsContext(m,p));v.displayName="KendoReactColorPalette";exports.ColorPalette=v;exports.ColorPalettePropsContext=m;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=u;exports.DEFAULT_PRESET=S;exports.DEFAULT_TILE_SIZE=g;
|
package/colors/ColorPalette.mjs
CHANGED
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as i from "react";
|
|
9
9
|
import s from "prop-types";
|
|
10
|
-
import { ColorPaletteService as
|
|
11
|
-
import { KEYS as l, classNames as
|
|
12
|
-
import { PALETTEPRESETS as
|
|
10
|
+
import { ColorPaletteService as w } from "./utils/color-palette.service.mjs";
|
|
11
|
+
import { KEYS as l, classNames as f, kendoThemeMaps as y, getTabIndex as E, dispatchEvent as k, createPropsContext as R, withIdHOC as F, withPropsContext as N } from "@progress/kendo-react-common";
|
|
12
|
+
import { PALETTEPRESETS as z } from "./models/palette-presets.mjs";
|
|
13
13
|
import { isPresent as T } from "./utils/misc.mjs";
|
|
14
14
|
import { parseColor as P } from "./utils/color-parser.mjs";
|
|
15
|
-
const I = 24,
|
|
15
|
+
const I = 24, C = 10, D = "office", a = class a extends i.Component {
|
|
16
16
|
constructor(t) {
|
|
17
17
|
super(t), this.wrapperRef = i.createRef(), this.paletteService = null, this.focus = () => {
|
|
18
18
|
this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
|
|
@@ -55,7 +55,7 @@ const I = 24, f = 10, D = "office", a = class a extends i.Component {
|
|
|
55
55
|
* @hidden
|
|
56
56
|
*/
|
|
57
57
|
render() {
|
|
58
|
-
const t = this.getPaletteInfo(), e = this.paletteService = new
|
|
58
|
+
const t = this.getPaletteInfo(), e = this.paletteService = new w();
|
|
59
59
|
e.setColorMatrix(t.colors, t.columns);
|
|
60
60
|
const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor);
|
|
61
61
|
return t.colors.length ? /* @__PURE__ */ i.createElement(
|
|
@@ -63,10 +63,10 @@ const I = 24, f = 10, D = "office", a = class a extends i.Component {
|
|
|
63
63
|
{
|
|
64
64
|
id: this.props.id,
|
|
65
65
|
role: "grid",
|
|
66
|
-
className:
|
|
66
|
+
className: f(
|
|
67
67
|
"k-colorpalette",
|
|
68
68
|
{
|
|
69
|
-
[`k-colorpalette-${
|
|
69
|
+
[`k-colorpalette-${y.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
|
|
70
70
|
"k-disabled": this.props.disabled
|
|
71
71
|
},
|
|
72
72
|
this.props.className
|
|
@@ -112,7 +112,7 @@ const I = 24, f = 10, D = "office", a = class a extends i.Component {
|
|
|
112
112
|
this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
|
|
113
113
|
}
|
|
114
114
|
dispatchChangeEvent(t, e) {
|
|
115
|
-
|
|
115
|
+
k(this.props.onChange, e, this, { value: t, rgbaValue: P(t, "rgba") });
|
|
116
116
|
}
|
|
117
117
|
get focusedColorCooridanates() {
|
|
118
118
|
return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
|
|
@@ -122,33 +122,40 @@ const I = 24, f = 10, D = "office", a = class a extends i.Component {
|
|
|
122
122
|
}
|
|
123
123
|
getPaletteInfo() {
|
|
124
124
|
if (typeof this.props.palette == "string") {
|
|
125
|
-
const t =
|
|
125
|
+
const t = z[this.props.palette];
|
|
126
126
|
return T(t) ? {
|
|
127
127
|
colors: t.colors,
|
|
128
|
-
columns: this.props.columns || t.columns ||
|
|
128
|
+
columns: this.props.columns || t.columns || C
|
|
129
129
|
} : { colors: [], columns: 0 };
|
|
130
130
|
}
|
|
131
|
-
return { colors: this.props.palette || [], columns: this.props.columns ||
|
|
131
|
+
return { colors: this.props.palette || [], columns: this.props.columns || C };
|
|
132
132
|
}
|
|
133
133
|
renderRows(t, e, o) {
|
|
134
134
|
return t.map((r, n) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: n }, this.renderColumns(r, n, e, o)));
|
|
135
135
|
}
|
|
136
136
|
renderColumns(t, e, o, r) {
|
|
137
|
-
const n = o !== void 0 && o.row === e,
|
|
138
|
-
return t.map((
|
|
139
|
-
const h = n &&
|
|
137
|
+
const n = o !== void 0 && o.row === e, m = o && o.col, g = r !== void 0 && r.row === e, v = r && r.col;
|
|
138
|
+
return t.map((p, c) => {
|
|
139
|
+
const h = n && m === c, b = f("k-colorpalette-tile", {
|
|
140
140
|
"k-selected": h,
|
|
141
|
-
"k-focus":
|
|
141
|
+
"k-focus": g && v === c
|
|
142
142
|
});
|
|
143
|
-
|
|
143
|
+
let u = {
|
|
144
|
+
width: this.props.tileSize,
|
|
145
|
+
height: this.props.tileSize
|
|
146
|
+
};
|
|
147
|
+
return typeof this.props.tileSize == "object" && (u = {
|
|
148
|
+
width: this.props.tileSize.width,
|
|
149
|
+
height: this.props.tileSize.height
|
|
150
|
+
}), /* @__PURE__ */ i.createElement(
|
|
144
151
|
"td",
|
|
145
152
|
{
|
|
146
153
|
role: "gridcell",
|
|
147
|
-
className:
|
|
148
|
-
"aria-label":
|
|
154
|
+
className: b,
|
|
155
|
+
"aria-label": p,
|
|
149
156
|
"aria-selected": h ? !0 : this.props.disabled ? void 0 : !1,
|
|
150
|
-
style: { backgroundColor:
|
|
151
|
-
onClick: (
|
|
157
|
+
style: { backgroundColor: p, ...u },
|
|
158
|
+
onClick: (S) => this.onColorClick(p, S),
|
|
152
159
|
id: this.createCellId({ row: e, col: c }),
|
|
153
160
|
key: c
|
|
154
161
|
}
|
|
@@ -179,19 +186,19 @@ a.displayName = "ColorPalette", a.propTypes = {
|
|
|
179
186
|
tileSize: I,
|
|
180
187
|
size: "medium"
|
|
181
188
|
};
|
|
182
|
-
let
|
|
183
|
-
const
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
189
|
+
let d = a;
|
|
190
|
+
const L = R(), U = F(
|
|
191
|
+
N(
|
|
192
|
+
L,
|
|
193
|
+
d
|
|
187
194
|
)
|
|
188
195
|
);
|
|
189
|
-
|
|
196
|
+
U.displayName = "KendoReactColorPalette";
|
|
190
197
|
export {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
198
|
+
U as ColorPalette,
|
|
199
|
+
L as ColorPalettePropsContext,
|
|
200
|
+
d as ColorPaletteWithoutContext,
|
|
201
|
+
C as DEFAULT_COLUMNS_COUNT,
|
|
195
202
|
D as DEFAULT_PRESET,
|
|
196
203
|
I as DEFAULT_TILE_SIZE
|
|
197
204
|
};
|
package/colors/ColorPicker.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ze=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),Le=require("../package-metadata.js"),Ne=require("./Picker.js"),xe=require("./ColorGradient.js")
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ze=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),Le=require("../package-metadata.js"),Ne=require("./Picker.js"),xe=require("./ColorGradient.js"),Z=require("./ColorPalette.js"),z=require("./FlatColorPicker.js"),qe=require("@progress/kendo-react-buttons"),Ve=require("@progress/kendo-svg-icons"),d=require("../messages/index.js"),He=require("@progress/kendo-react-intl"),Me=require("../common/AdaptiveMode.js"),We=require("@progress/kendo-react-layout");function Ue(f){const S=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const w in f)if(w!=="default"){const r=Object.getOwnPropertyDescriptor(f,w);Object.defineProperty(S,w,r.get?r:{enumerable:!0,get:()=>f[w]})}}return S.default=f,Object.freeze(S)}const t=Ue(ze),je={opacity:!0},Ge={palette:Z.DEFAULT_PRESET,tileSize:Z.DEFAULT_TILE_SIZE},$=f=>f!==void 0,fe=n.createPropsContext(),J=t.forwardRef((f,S)=>{var ce,ie;const w=!n.validatePackage(Le.packageMetadata,{component:"ColorPicker"}),r=n.usePropsContext(fe,f),h=He.useLocalization(),Q=n.useAdaptiveModeContext(),{size:p=E.size,rounded:L=E.rounded,fillMode:A=E.fillMode,gradientSettings:P=E.gradientSettings,paletteSettings:N=E.paletteSettings,flatColorPickerSettings:T,view:g=r.views?void 0:E.view,views:s=g?void 0:E.views,activeView:X,popupSettings:m,valid:ge,disabled:x,tabIndex:ve,icon:q,svgIcon:V,iconClassName:I,onChange:H,onFocus:M,onBlur:W,onActiveColorClick:U,className:ke,adaptive:me,adaptiveTitle:Y=h.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle])}=r,u=t.useRef(null),_=t.useRef(null),F=t.useRef(null),k=t.useRef(null),y=t.useRef(),Ce=t.useRef(null),[be,ee]=t.useState(!1),[Ee,we]=t.useState(r.defaultValue),[Pe,ye]=t.useState(!1),[B,Se]=t.useState(),j=$(r.value),C=$(r.open),c=j?r.value:Ee,b=C?r.open:Pe,te=t.useRef(c),ne=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(S,()=>({element:u.current,actionElement:Ce.current,value:c,focus:ne}),[c,ne]);const he=!!(B&&Q&&B<=Q.medium&&me);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Oe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const l=t.useCallback((e,i)=>{C||(!e&&!i&&u&&u.current&&u.current.focus(),ye(e))},[C]),ae=t.useMemo(()=>new n.Navigation({root:u,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,i,a)=>{l(!1)},Enter:(e,i,a)=>{!C&&e===u.current&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowDown:(e,i,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowUp:(e,i,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!1))},Tab:(e,i,a)=>{var R,se,ue;if(n.getActiveElement(document)!==u.current){const de=(R=F.current)==null?void 0:R.wrapperRef.current,D=(se=_.current)==null?void 0:se.wrapperRef.current,pe=(ue=k.current)==null?void 0:ue.element;g==="palette"&&de?n.keepFocusInContainer(a,de):g==="gradient"&&D?n.keepFocusInContainer(a,D):g==="combo"&&D?n.keepFocusInContainer(a,D.parentElement):s&&pe&&n.keepFocusInContainer(a,pe)}}}}}),[l,C]),Te=t.useCallback(ae.triggerKeyboardEvent.bind(ae),[]),_e=t.useCallback(()=>{C||(_.current&&_.current.wrapperRef.current?n.focusFirstFocusableChild(_.current.wrapperRef.current):F.current?F.current.focus():k.current&&k.current.element&&n.focusFirstFocusableChild(k.current.element))},[C]),O=e=>te.current=e,re=t.useCallback(e=>{const i={value:te.current,nativeEvent:e.nativeEvent,syntheticEvent:e};v(i),l(!b,!0)},[b]),G=t.useCallback(()=>{l(!1,!0)},[l]),Re=t.useCallback(e=>{U&&U.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:c,target:{element:u.current,value:c}})},[U,c]),Ae=t.useCallback(e=>{y.current?(clearTimeout(y.current),y.current=void 0):ee(!0),M&&M.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[M]),Ie=t.useCallback(()=>{l(!1,!0),ee(!1),y.current=void 0},[]),Fe=t.useCallback(e=>{clearTimeout(y.current),y.current=window.setTimeout(Ie),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[W]),v=t.useCallback((e,i)=>{var R;const a=i?e.rgbaValue||"":(R=e.value)!=null?R:"";j||we(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),l(!1)},[j,H]),oe=t.useCallback(e=>v(e,!0),[$,v]),K=t.useCallback(e=>t.createElement(t.Fragment,null,(g==="combo"||g==="gradient")&&t.createElement(xe.ColorGradient,{...P,_adaptive:e,ref:_,isInsidePopup:!0,size:e?"large":p,fillMode:A,value:c,onChange:v}),(g==="combo"||g==="palette")&&t.createElement(Z.ColorPalette,{...N,ref:F,size:e?"large":p,value:c,onChange:oe}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(z.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient","palette"],activeView:X,setOpen:l,showButtons:!e,value:c,onChange:v,setAdaptiveModeValue:O}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(z.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette","gradient"],setOpen:l,showButtons:!e,value:c,onChange:v,setAdaptiveModeValue:O}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(z.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient"],showButtons:!e,setOpen:l,value:c,onChange:v,setAdaptiveModeValue:O}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(z.FlatColorPicker,{...T,_paletteSettings:N,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette"],showButtons:!e,setOpen:l,value:c,onChange:v,setAdaptiveModeValue:O}),w&&t.createElement(n.WatermarkOverlay,null)),[X,A,T,P,v,oe,N,l,p,c,g,s]),Be=t.useCallback(()=>{var i;const e={animation:!!((i=m==null?void 0:m.animate)==null||i),title:Y,expand:b,onClose:G,windowWidth:B,footer:{cancelText:h.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:G,applyText:h.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:re}};return t.createElement(Me.AdaptiveMode,{...e},t.createElement(We.ActionSheetContent,{overflowHidden:!0},K(!0)))},[m==null?void 0:m.animate,Y,b,G,B,h,re,K]),Oe=t.useCallback(e=>{for(const i of e)Se(i.target.clientWidth)},[]),le=n.useDir(u,r.dir),De=ge!==!1;return t.createElement("span",{id:r.id,role:"combobox","aria-label":r.ariaLabel,"aria-labelledby":r.ariaLabelledBy,"aria-describedby":r.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":b,"aria-controls":`k-colorpicker-popup-${(ce=r.id)!=null?ce:0}`,"aria-disabled":x?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${A}`]:A,[`k-rounded-${n.kendoThemeMaps.roundedMap[L]||L}`]:L,"k-invalid":!De,"k-disabled":x,"k-focus":be,className:ke}),ref:u,tabIndex:n.getTabIndex(ve,x),title:r.title,onKeyDown:Te,onFocus:Ae,onBlur:Fe,dir:le},t.createElement(Ne.Picker,{dir:le,open:b,onOpen:_e,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(ie=r.id)!=null?ie:0}`,...m},input:t.createElement("span",{onClick:Re,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!c,"k-icon-color-preview":q||V||I})},I&&t.createElement("span",{className:n.classNames("k-color-preview-icon",I)}),!I&&(q||V)&&t.createElement(n.IconWrap,{name:q,icon:V}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:c}}))),button:t.createElement(qe.Button,{tabIndex:-1,type:"button",onClick:()=>l(!b),className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Ve.caretAltDownIcon,"aria-label":h.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:K(!1),_mobileMode:he,_actionSheet:Be()}))});J.propTypes={value:o.string,defaultValue:o.string,disabled:o.bool,view:o.oneOf(["gradient","palette","combo"]),views:o.arrayOf(o.oneOf(["gradient","palette"])),dir:o.string,id:o.string,icon:o.string,svgIcon:n.svgIconPropType,ariaLabelledBy:o.string,ariaDescribedBy:o.string,size:o.oneOf([null,"small","medium","large"]),rounded:o.oneOf([null,"small","medium","large","full"]),fillMode:o.oneOf([null,"solid","flat","outline"]),className:o.string,adaptive:o.bool,adaptiveTitle:o.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:je,paletteSettings:Ge};J.displayName="KendoColorPicker";exports.ColorPicker=J;exports.ColorPickerPropsContext=fe;
|
package/colors/ColorPicker.mjs
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
9
|
import a from "prop-types";
|
|
10
|
-
import { createPropsContext as He, validatePackage as We, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as $e, Navigation as Ge, getActiveElement as Me, keepFocusInContainer as I, focusFirstFocusableChild as ue, WatermarkOverlay as Ze, useDir as je, classNames as
|
|
10
|
+
import { createPropsContext as He, validatePackage as We, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as $e, Navigation as Ge, getActiveElement as Me, keepFocusInContainer as I, focusFirstFocusableChild as ue, WatermarkOverlay as Ze, useDir as je, classNames as M, kendoThemeMaps as de, getTabIndex as qe, IconWrap as Je, svgIconPropType as Qe } from "@progress/kendo-react-common";
|
|
11
11
|
import { packageMetadata as Xe } from "../package-metadata.mjs";
|
|
12
12
|
import { Picker as Ye } from "./Picker.mjs";
|
|
13
13
|
import { ColorGradient as et } from "./ColorGradient.mjs";
|
|
@@ -24,33 +24,33 @@ const st = {
|
|
|
24
24
|
}, ut = {
|
|
25
25
|
palette: nt,
|
|
26
26
|
tileSize: at
|
|
27
|
-
},
|
|
27
|
+
}, Z = (D) => D !== void 0, dt = He(), ge = t.forwardRef((D, ke) => {
|
|
28
28
|
var re, oe;
|
|
29
|
-
const Ce = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, D), b = lt(),
|
|
29
|
+
const Ce = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, D), b = lt(), j = Ke(), {
|
|
30
30
|
size: u = k.size,
|
|
31
31
|
rounded: L = k.rounded,
|
|
32
32
|
fillMode: S = k.fillMode,
|
|
33
33
|
gradientSettings: C = k.gradientSettings,
|
|
34
|
-
paletteSettings:
|
|
34
|
+
paletteSettings: x = k.paletteSettings,
|
|
35
35
|
flatColorPickerSettings: w,
|
|
36
36
|
view: d = o.views ? void 0 : k.view,
|
|
37
37
|
views: c = d ? void 0 : k.views,
|
|
38
38
|
activeView: q,
|
|
39
39
|
popupSettings: m,
|
|
40
40
|
valid: Ee,
|
|
41
|
-
disabled:
|
|
41
|
+
disabled: N,
|
|
42
42
|
tabIndex: be,
|
|
43
|
-
icon:
|
|
44
|
-
svgIcon:
|
|
43
|
+
icon: O,
|
|
44
|
+
svgIcon: F,
|
|
45
45
|
iconClassName: P,
|
|
46
|
-
onChange:
|
|
47
|
-
onFocus:
|
|
48
|
-
onBlur:
|
|
49
|
-
onActiveColorClick:
|
|
46
|
+
onChange: V,
|
|
47
|
+
onFocus: H,
|
|
48
|
+
onBlur: W,
|
|
49
|
+
onActiveColorClick: U,
|
|
50
50
|
className: we,
|
|
51
51
|
adaptive: ye,
|
|
52
52
|
adaptiveTitle: J = b.toLanguageString(pe, B[pe])
|
|
53
|
-
} = o, s = t.useRef(null), y = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(), he = t.useRef(null), [Se, Q] = t.useState(!1), [Pe, Te] = t.useState(o.defaultValue), [_e, Re] = t.useState(!1), [_, Ae] = t.useState(),
|
|
53
|
+
} = o, s = t.useRef(null), y = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(), he = t.useRef(null), [Se, Q] = t.useState(!1), [Pe, Te] = t.useState(o.defaultValue), [_e, Re] = t.useState(!1), [_, Ae] = t.useState(), K = Z(o.value), v = Z(o.open), l = K ? o.value : Pe, g = v ? o.open : _e, X = t.useRef(l), Y = t.useCallback(() => {
|
|
54
54
|
s.current && s.current.focus();
|
|
55
55
|
}, []);
|
|
56
56
|
t.useImperativeHandle(
|
|
@@ -64,7 +64,7 @@ const st = {
|
|
|
64
64
|
}),
|
|
65
65
|
[l, Y]
|
|
66
66
|
);
|
|
67
|
-
const Ie = !!(_ &&
|
|
67
|
+
const Ie = !!(_ && j && _ <= j.medium && ye);
|
|
68
68
|
t.useEffect(() => {
|
|
69
69
|
const e = $e && window.ResizeObserver && new window.ResizeObserver(Fe.bind(void 0));
|
|
70
70
|
return document != null && document.body && e && e.observe(document.body), () => {
|
|
@@ -115,11 +115,11 @@ const st = {
|
|
|
115
115
|
p(i), r(!g, !0);
|
|
116
116
|
},
|
|
117
117
|
[g]
|
|
118
|
-
),
|
|
118
|
+
), $ = t.useCallback(() => {
|
|
119
119
|
r(!1, !0);
|
|
120
120
|
}, [r]), De = t.useCallback(
|
|
121
121
|
(e) => {
|
|
122
|
-
|
|
122
|
+
U && U.call(void 0, {
|
|
123
123
|
syntheticEvent: e,
|
|
124
124
|
nativeEvent: e.nativeEvent,
|
|
125
125
|
value: l,
|
|
@@ -129,30 +129,30 @@ const st = {
|
|
|
129
129
|
}
|
|
130
130
|
});
|
|
131
131
|
},
|
|
132
|
-
[
|
|
132
|
+
[U, l]
|
|
133
133
|
), Le = t.useCallback(
|
|
134
134
|
(e) => {
|
|
135
|
-
E.current ? (clearTimeout(E.current), E.current = void 0) : Q(!0),
|
|
135
|
+
E.current ? (clearTimeout(E.current), E.current = void 0) : Q(!0), H && H.call(void 0, {
|
|
136
136
|
nativeEvent: e.nativeEvent,
|
|
137
137
|
syntheticEvent: e
|
|
138
138
|
});
|
|
139
139
|
},
|
|
140
|
-
[
|
|
140
|
+
[H]
|
|
141
141
|
), xe = t.useCallback(() => {
|
|
142
142
|
r(!1, !0), Q(!1), E.current = void 0;
|
|
143
143
|
}, []), Ne = t.useCallback(
|
|
144
144
|
(e) => {
|
|
145
|
-
clearTimeout(E.current), E.current = window.setTimeout(xe),
|
|
145
|
+
clearTimeout(E.current), E.current = window.setTimeout(xe), W && W.call(void 0, {
|
|
146
146
|
nativeEvent: e.nativeEvent,
|
|
147
147
|
syntheticEvent: e
|
|
148
148
|
});
|
|
149
149
|
},
|
|
150
|
-
[
|
|
150
|
+
[W]
|
|
151
151
|
), p = t.useCallback(
|
|
152
152
|
(e, i) => {
|
|
153
153
|
var h;
|
|
154
154
|
const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
|
|
155
|
-
|
|
155
|
+
K || Te(n), V && V.call(void 0, {
|
|
156
156
|
value: n,
|
|
157
157
|
nativeEvent: e.nativeEvent,
|
|
158
158
|
syntheticEvent: e.syntheticEvent,
|
|
@@ -162,11 +162,11 @@ const st = {
|
|
|
162
162
|
}
|
|
163
163
|
}), r(!1);
|
|
164
164
|
},
|
|
165
|
-
[
|
|
165
|
+
[K, V]
|
|
166
166
|
), ne = t.useCallback(
|
|
167
167
|
(e) => p(e, !0),
|
|
168
|
-
[
|
|
169
|
-
),
|
|
168
|
+
[Z, p]
|
|
169
|
+
), G = t.useCallback(
|
|
170
170
|
(e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
|
|
171
171
|
et,
|
|
172
172
|
{
|
|
@@ -182,7 +182,7 @@ const st = {
|
|
|
182
182
|
), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
|
|
183
183
|
tt,
|
|
184
184
|
{
|
|
185
|
-
...
|
|
185
|
+
...x,
|
|
186
186
|
ref: T,
|
|
187
187
|
size: e ? "large" : u,
|
|
188
188
|
value: l,
|
|
@@ -235,6 +235,7 @@ const st = {
|
|
|
235
235
|
z,
|
|
236
236
|
{
|
|
237
237
|
...w,
|
|
238
|
+
_paletteSettings: x,
|
|
238
239
|
_gradientSettings: { _adaptive: e, ...C },
|
|
239
240
|
ref: f,
|
|
240
241
|
size: e ? "large" : u,
|
|
@@ -253,7 +254,7 @@ const st = {
|
|
|
253
254
|
C,
|
|
254
255
|
p,
|
|
255
256
|
ne,
|
|
256
|
-
|
|
257
|
+
x,
|
|
257
258
|
r,
|
|
258
259
|
u,
|
|
259
260
|
l,
|
|
@@ -266,25 +267,25 @@ const st = {
|
|
|
266
267
|
animation: !!((i = m == null ? void 0 : m.animate) == null || i),
|
|
267
268
|
title: J,
|
|
268
269
|
expand: g,
|
|
269
|
-
onClose:
|
|
270
|
+
onClose: $,
|
|
270
271
|
windowWidth: _,
|
|
271
272
|
footer: {
|
|
272
273
|
cancelText: b.toLanguageString(fe, B[fe]),
|
|
273
|
-
onCancel:
|
|
274
|
+
onCancel: $,
|
|
274
275
|
applyText: b.toLanguageString(me, B[me]),
|
|
275
276
|
onApply: te
|
|
276
277
|
}
|
|
277
278
|
};
|
|
278
|
-
return /* @__PURE__ */ t.createElement(it, { ...e }, /* @__PURE__ */ t.createElement(ct, { overflowHidden: !0 },
|
|
279
|
+
return /* @__PURE__ */ t.createElement(it, { ...e }, /* @__PURE__ */ t.createElement(ct, { overflowHidden: !0 }, G(!0)));
|
|
279
280
|
}, [
|
|
280
281
|
m == null ? void 0 : m.animate,
|
|
281
282
|
J,
|
|
282
283
|
g,
|
|
283
|
-
|
|
284
|
+
$,
|
|
284
285
|
_,
|
|
285
286
|
b,
|
|
286
287
|
te,
|
|
287
|
-
|
|
288
|
+
G
|
|
288
289
|
]), Fe = t.useCallback((e) => {
|
|
289
290
|
for (const i of e)
|
|
290
291
|
Ae(i.target.clientWidth);
|
|
@@ -300,18 +301,18 @@ const st = {
|
|
|
300
301
|
"aria-haspopup": "dialog",
|
|
301
302
|
"aria-expanded": g,
|
|
302
303
|
"aria-controls": `k-colorpicker-popup-${(re = o.id) != null ? re : 0}`,
|
|
303
|
-
"aria-disabled":
|
|
304
|
-
className:
|
|
304
|
+
"aria-disabled": N ? "true" : void 0,
|
|
305
|
+
className: M("k-colorpicker", "k-picker", "k-icon-picker", {
|
|
305
306
|
[`k-picker-${de.sizeMap[u] || u}`]: u,
|
|
306
307
|
[`k-picker-${S}`]: S,
|
|
307
308
|
[`k-rounded-${de.roundedMap[L] || L}`]: L,
|
|
308
309
|
"k-invalid": !Ve,
|
|
309
|
-
"k-disabled":
|
|
310
|
+
"k-disabled": N,
|
|
310
311
|
"k-focus": Se,
|
|
311
312
|
className: we
|
|
312
313
|
}),
|
|
313
314
|
ref: s,
|
|
314
|
-
tabIndex: qe(be,
|
|
315
|
+
tabIndex: qe(be, N),
|
|
315
316
|
title: o.title,
|
|
316
317
|
onKeyDown: ze,
|
|
317
318
|
onFocus: Le,
|
|
@@ -329,13 +330,13 @@ const st = {
|
|
|
329
330
|
input: /* @__PURE__ */ t.createElement("span", { onClick: De, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
|
|
330
331
|
"span",
|
|
331
332
|
{
|
|
332
|
-
className:
|
|
333
|
+
className: M("k-value-icon", "k-color-preview", {
|
|
333
334
|
"k-no-color": !l,
|
|
334
|
-
"k-icon-color-preview":
|
|
335
|
+
"k-icon-color-preview": O || F || P
|
|
335
336
|
})
|
|
336
337
|
},
|
|
337
|
-
P && /* @__PURE__ */ t.createElement("span", { className:
|
|
338
|
-
!P && (
|
|
338
|
+
P && /* @__PURE__ */ t.createElement("span", { className: M("k-color-preview-icon", P) }),
|
|
339
|
+
!P && (O || F) && /* @__PURE__ */ t.createElement(Je, { name: O, icon: F }),
|
|
339
340
|
/* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
|
|
340
341
|
)),
|
|
341
342
|
button: /* @__PURE__ */ t.createElement(
|
|
@@ -354,7 +355,7 @@ const st = {
|
|
|
354
355
|
)
|
|
355
356
|
}
|
|
356
357
|
),
|
|
357
|
-
content:
|
|
358
|
+
content: G(!1),
|
|
358
359
|
_mobileMode: Ie,
|
|
359
360
|
_actionSheet: Oe()
|
|
360
361
|
}
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),Q=require("./ColorPalette.js"),U=require("./ColorGradient.js"),X=require("../package-metadata.js"),Y=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function Z(e){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const b in e)if(b!=="default"){const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),Q=require("./ColorPalette.js"),U=require("./ColorGradient.js"),X=require("../package-metadata.js"),Y=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function Z(e){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const b in e)if(b!=="default"){const v=Object.getOwnPropertyDescriptor(e,b);Object.defineProperty(h,b,v.get?v:{enumerable:!0,get:()=>e[b]})}}return h.default=e,Object.freeze(h)}const t=Z(J),M=t.forwardRef((e,h)=>{const b=!n.validatePackage(X.packageMetadata,{component:"FlatColorPicker"}),v=t.useRef(null),B=t.useRef(null),A=t.useRef(null),{defaultValue:E,showButtons:w=!0,showPreview:x=!0,showClearButton:F=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:N="gradient",size:i="medium"}=e,[C,z]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,V]=t.useState((d!=null?d:[])[0]==="gradient"&&N==="gradient"),[c,y]=t.useState(e.value||E||void 0),[k,G]=t.useState(e.value||E||void 0),_=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const m=Y.useLocalization(),L=t.useCallback(()=>{v.current&&v.current.focus()},[v]);t.useImperativeHandle(v,()=>({element:B.current,focus:L,props:e,value:_}),[_,L,e]),t.useImperativeHandle(h,()=>v.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),S=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&N==="gradient"?V(!g):a==="gradient"&&N==="palette"&&V(!0)},[N,g]),T=t.useCallback(a=>{var u;const r=E||void 0;if(y(r),G(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const I={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,I)}},[E,e.onPreviewChange]),q=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),j=t.useCallback(a=>{if(c!==void 0&&G(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),D=t.useCallback(()=>{y(k),e.setOpen&&e.setOpen(!1)},[k]),K=t.useCallback(a=>{if(y(k),e.onPreviewChange){const r={value:k,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[k,e.onPreviewChange]),H=t.useCallback(a=>{var u,I;if((!a.relatedTarget||!((u=B.current)!=null&&u.contains(a.relatedTarget)))&&!((I=e._gradientSettings)!=null&&I._adaptive)&&(!w&&c!==void 0&&G(c),!w&&e.onChange)){const $={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,$)}},[c,w,e.onChange]),O=t.useMemo(()=>new n.Navigation({root:B,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),W=t.useCallback(O.triggerKeyboardEvent.bind(O),[]);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:{position:"relative",...e.style},ref:B,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:H,onKeyDown:W},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.dropletSliderIcon,selected:g,onClick:()=>S("gradient")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.paletteIcon,selected:!g,onClick:()=>S("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.paletteIcon,selected:!g,onClick:()=>S("palette")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.dropletSliderIcon,selected:g,onClick:()=>S("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:C,onClick:()=>R("ColorGradient"),icon:"droplet-slider",svgIcon:f.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!C,onClick:()=>R("ColorPalette"),icon:"palette",svgIcon:f.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},F&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:T,"aria-label":m.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:f.dropletSlashIcon}),x&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":_===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":k===void 0}),onClick:K},t.createElement("span",{className:"k-color-preview-mask",style:{background:k||void 0}})))),b&&t.createElement(n.WatermarkOverlay,null)),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&C||d&&g)&&t.createElement(U.ColorGradient,{ref:A,role:"none",ariaLabel:void 0,value:c,onChange:q,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!C||d&&!g)&&t.createElement(Q.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:q,size:i,...e._paletteSettings})),w&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:D},l.messages[l.flatColorPickerCancelBtn]),t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:j},l.messages[l.flatColorPickerApplyBtn])))}),p={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};M.displayName="KendoFlatColorPicker";M.propTypes=p;exports.FlatColorPicker=M;
|
|
@@ -323,7 +323,8 @@ const T = a.forwardRef((e, D) => {
|
|
|
323
323
|
ariaLabelledBy: "required_label",
|
|
324
324
|
value: i,
|
|
325
325
|
onChange: F,
|
|
326
|
-
size: o
|
|
326
|
+
size: o,
|
|
327
|
+
...e._paletteSettings
|
|
327
328
|
}
|
|
328
329
|
)),
|
|
329
330
|
w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ a.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[ge]), /* @__PURE__ */ a.createElement(
|