@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
401 lines (400 loc) • 12.7 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import r from "prop-types";
import { createPropsContext as He, validatePackage as We, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as $e, Navigation as Ge, getActiveElement as Me, keepFocusInContainer as z, focusFirstFocusableChild as de, WatermarkOverlay as Ze, useDir as je, classNames as Z, kendoThemeMaps as pe, getTabIndex as qe, IconWrap as Je, svgIconPropType as Qe } from "@progress/kendo-react-common";
import { packageMetadata as Xe } from "../package-metadata.mjs";
import { Picker as Ye } from "./Picker.mjs";
import { ColorGradient as et } from "./ColorGradient.mjs";
import { ColorPalette as tt, DEFAULT_PRESET as nt, DEFAULT_TILE_SIZE as at } from "./ColorPalette.mjs";
import { FlatColorPicker as B } from "./FlatColorPicker.mjs";
import { Button as rt } from "@progress/kendo-react-buttons";
import { caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
import { colorPickerAdaptiveTitle as fe, messages as D, flatColorPickerCancelBtn as me, flatColorPickerApplyBtn as ve, colorPickerDropdownButtonAriaLabel as ge } from "../messages/index.mjs";
import { useLocalization as lt } from "@progress/kendo-react-intl";
import { AdaptiveMode as it } from "../common/AdaptiveMode.mjs";
import { ActionSheetContent as ct } from "@progress/kendo-react-layout";
const st = {
opacity: !0
}, ut = {
palette: nt,
tileSize: at
}, j = (L) => L !== void 0, dt = He(), ke = t.forwardRef((L, Ce) => {
var oe, le;
const Ee = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, L), b = lt(), q = Ke(), {
size: u = k.size,
rounded: x = k.rounded,
fillMode: _ = k.fillMode,
gradientSettings: C = k.gradientSettings,
paletteSettings: w = k.paletteSettings,
flatColorPickerSettings: y,
view: d = o.views ? void 0 : k.view,
views: c = d ? void 0 : k.views,
activeView: J,
popupSettings: v,
valid: be,
disabled: N,
tabIndex: we,
icon: O,
svgIcon: F,
iconClassName: P,
onChange: V,
onFocus: H,
onBlur: W,
onActiveColorClick: U,
className: ye,
adaptive: Se,
adaptiveTitle: Q = b.toLanguageString(fe, D[fe])
} = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), m = t.useRef(null), E = t.useRef(void 0), he = t.useRef(null), [_e, X] = t.useState(!1), [Pe, Te] = t.useState(o.defaultValue || void 0), [Re, Ae] = t.useState(!1), [R, Ie] = t.useState(), K = j(o.value), g = j(o.open), l = K ? o.value : Pe, p = g ? o.open : Re, Y = t.useRef(l), ee = t.useCallback(() => {
s.current && s.current.focus();
}, []);
t.useImperativeHandle(
Ce,
() => ({
// we agreed that each element will have focus method exposed
element: s.current,
actionElement: he.current,
value: l,
focus: ee
}),
[l, ee]
);
const $ = !!(R && q && R <= q.medium && Se);
t.useEffect(() => {
const e = $e && window.ResizeObserver && new window.ResizeObserver(Fe.bind(void 0));
return document != null && document.body && e && e.observe(document.body), () => {
document != null && document.body && e && e.disconnect();
};
}, []);
const a = t.useCallback(
(e, i) => {
g || (!e && !i && s && s.current && s.current.focus(), Ae(e));
},
[g]
), te = t.useMemo(() => new Ge({
root: s,
selectors: [".k-colorpicker", ".k-color-picker-popup"],
tabIndex: 0,
keyboardEvents: {
keydown: {
Escape: (e, i, n) => {
a(!1);
},
Enter: (e, i, n) => {
!g && e === s.current && (n.preventDefault(), n.stopPropagation(), a(!0));
},
ArrowDown: (e, i, n) => {
n.altKey && (n.preventDefault(), n.stopPropagation(), a(!0));
},
ArrowUp: (e, i, n) => {
n.altKey && (n.preventDefault(), n.stopPropagation(), a(!1));
},
Tab: (e, i, n) => {
var h, ie, ce;
if (Me(document) !== s.current) {
const se = (h = T.current) == null ? void 0 : h.wrapperRef.current, I = (ie = S.current) == null ? void 0 : ie.wrapperRef.current, ue = (ce = m.current) == null ? void 0 : ce.element;
d === "palette" && se ? z(n, se) : d === "gradient" && I ? z(n, I) : d === "combo" && I ? z(n, I.parentElement) : c && ue && z(n, ue);
}
}
}
}
}), [a, g]), ze = t.useCallback(te.triggerKeyboardEvent.bind(te), []), Be = t.useCallback(() => {
g || (S.current && S.current.wrapperRef.current ? de(S.current.wrapperRef.current) : T.current ? T.current.focus() : m.current && m.current.element && de(m.current.element));
}, [g]), A = (e) => Y.current = e, ne = t.useCallback(
(e) => {
const i = {
value: Y.current,
nativeEvent: e.nativeEvent,
syntheticEvent: e
};
f(i), a(!p, !0);
},
[p]
), G = t.useCallback(() => {
a(!1, !0);
}, [a]), De = t.useCallback(
(e) => {
U && U.call(void 0, {
syntheticEvent: e,
nativeEvent: e.nativeEvent,
value: l,
target: {
element: s.current,
value: l
}
});
},
[U, l]
), Le = t.useCallback(
(e) => {
E.current ? (clearTimeout(E.current), E.current = void 0) : (X(!0), $ && !p && a(!0)), H && H.call(void 0, {
nativeEvent: e.nativeEvent,
syntheticEvent: e
});
},
[$, H, p, a]
), xe = t.useCallback(() => {
a(!1, !0), X(!1), E.current = void 0;
}, []), Ne = t.useCallback(
(e) => {
clearTimeout(E.current), E.current = window.setTimeout(xe), W && W.call(void 0, {
nativeEvent: e.nativeEvent,
syntheticEvent: e
});
},
[W]
), f = t.useCallback(
(e, i) => {
var h;
const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
K || Te(n), V && V.call(void 0, {
value: n,
nativeEvent: e.nativeEvent,
syntheticEvent: e.syntheticEvent,
target: {
element: s.current,
value: n
}
}), a(!1);
},
[K, V]
), ae = t.useCallback(
(e) => f(e, !0),
[j, f]
), M = t.useCallback(
(e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
et,
{
...C,
_adaptive: e,
ref: S,
isInsidePopup: !0,
size: e ? "large" : u,
fillMode: _,
value: l,
onChange: f
}
), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
tt,
{
...w,
ref: T,
size: e ? "large" : u,
value: l,
onChange: ae
}
), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
B,
{
...y,
_paletteSettings: w,
_gradientSettings: { _adaptive: e, ...C },
ref: m,
size: e ? "large" : u,
views: ["gradient", "palette"],
activeView: J,
setOpen: a,
showButtons: !e,
value: l,
onChange: f,
setAdaptiveModeValue: A
}
), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
B,
{
...y,
_paletteSettings: w,
_gradientSettings: { _adaptive: e, ...C },
ref: m,
size: e ? "large" : u,
views: ["palette", "gradient"],
setOpen: a,
showButtons: !e,
value: l,
onChange: f,
setAdaptiveModeValue: A
}
), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
B,
{
...y,
_gradientSettings: { _adaptive: e, ...C },
ref: m,
size: e ? "large" : u,
views: ["gradient"],
showButtons: !e,
setOpen: a,
value: l,
onChange: f,
setAdaptiveModeValue: A
}
), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
B,
{
...y,
_paletteSettings: w,
_gradientSettings: { _adaptive: e, ...C },
ref: m,
size: e ? "large" : u,
views: ["palette"],
showButtons: !e,
setOpen: a,
value: l,
onChange: f,
setAdaptiveModeValue: A
}
), Ee && /* @__PURE__ */ t.createElement(Ze, null)),
[
J,
_,
y,
C,
f,
ae,
w,
a,
u,
l,
d,
c
]
), Oe = t.useCallback(() => {
var i;
const e = {
animation: !!((i = v == null ? void 0 : v.animate) == null || i),
title: Q,
expand: p,
onClose: G,
windowWidth: R,
footer: {
cancelText: b.toLanguageString(me, D[me]),
onCancel: G,
applyText: b.toLanguageString(ve, D[ve]),
onApply: ne
}
};
return /* @__PURE__ */ t.createElement(it, { ...e }, /* @__PURE__ */ t.createElement(ct, null, M(!0)));
}, [
v == null ? void 0 : v.animate,
Q,
p,
G,
R,
b,
ne,
M
]), Fe = t.useCallback((e) => {
for (const i of e)
Ie(i.target.clientWidth);
}, []), re = je(s, o.dir), Ve = be !== !1;
return /* @__PURE__ */ t.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-controls": `k-colorpicker-popup-${(oe = o.id) != null ? oe : 0}`,
"aria-disabled": N ? "true" : void 0,
className: Z("k-colorpicker", "k-picker", "k-icon-picker", {
[`k-picker-${pe.sizeMap[u] || u}`]: u,
[`k-picker-${_}`]: _,
[`k-rounded-${pe.roundedMap[x] || x}`]: x,
"k-invalid": !Ve,
"k-disabled": N,
"k-focus": _e,
className: ye
}),
ref: s,
tabIndex: qe(we, N),
title: o.title,
onKeyDown: ze,
onFocus: Le,
onBlur: Ne,
dir: re
},
/* @__PURE__ */ t.createElement(
Ye,
{
dir: re,
open: p,
onOpen: Be,
popupAnchor: s.current || void 0,
popupSettings: { id: `k-colorpicker-popup-${(le = o.id) != null ? le : 0}`, ...v },
input: /* @__PURE__ */ t.createElement("span", { onClick: De, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
"span",
{
className: Z("k-value-icon", "k-color-preview", {
"k-no-color": !l,
"k-icon-color-preview": O || F || P
})
},
P && /* @__PURE__ */ t.createElement("span", { className: Z("k-color-preview-icon", P) }),
!P && (O || F) && /* @__PURE__ */ t.createElement(Je, { name: O, icon: F }),
/* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
)),
button: /* @__PURE__ */ t.createElement(
rt,
{
tabIndex: -1,
type: "button",
onClick: () => a(!p),
className: "k-input-button",
rounded: null,
icon: "caret-alt-down",
svgIcon: ot,
"aria-label": b.toLanguageString(
ge,
D[ge]
)
}
),
content: M(!1),
_mobileMode: $,
_actionSheet: Oe()
}
)
);
});
ke.propTypes = {
value: r.string,
defaultValue: r.string,
disabled: r.bool,
view: r.oneOf(["gradient", "palette", "combo"]),
views: r.arrayOf(r.oneOf(["gradient", "palette"])),
dir: r.string,
id: r.string,
icon: r.string,
svgIcon: Qe,
ariaLabelledBy: r.string,
ariaDescribedBy: r.string,
size: r.oneOf([null, "small", "medium", "large"]),
rounded: r.oneOf([null, "small", "medium", "large", "full"]),
fillMode: r.oneOf([null, "solid", "flat", "outline"]),
className: r.string,
adaptive: r.bool,
adaptiveTitle: r.string,
adaptiveSubtitle: r.string
};
const k = {
size: "medium",
rounded: "medium",
fillMode: "solid",
view: "palette",
views: ["gradient", "palette"],
gradientSettings: st,
paletteSettings: ut
};
ke.displayName = "KendoColorPicker";
export {
ke as ColorPicker,
dt as ColorPickerPropsContext
};