@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
398 lines (397 loc) • 12.5 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 a 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 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";
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 z } from "./FlatColorPicker.mjs";
import { Button as rt } from "@progress/kendo-react-buttons";
import { caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
import { colorPickerAdaptiveTitle as pe, messages as B, flatColorPickerCancelBtn as fe, flatColorPickerApplyBtn as me, colorPickerDropdownButtonAriaLabel as ve } 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
}, Z = (D) => D !== void 0, dt = He(), ge = t.forwardRef((D, ke) => {
var re, oe;
const Ce = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, D), b = lt(), j = Ke(), {
size: u = k.size,
rounded: L = k.rounded,
fillMode: S = k.fillMode,
gradientSettings: C = k.gradientSettings,
paletteSettings: x = k.paletteSettings,
flatColorPickerSettings: w,
view: d = o.views ? void 0 : k.view,
views: c = d ? void 0 : k.views,
activeView: q,
popupSettings: m,
valid: Ee,
disabled: N,
tabIndex: be,
icon: O,
svgIcon: F,
iconClassName: P,
onChange: V,
onFocus: H,
onBlur: W,
onActiveColorClick: U,
className: we,
adaptive: ye,
adaptiveTitle: J = b.toLanguageString(pe, B[pe])
} = 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(() => {
s.current && s.current.focus();
}, []);
t.useImperativeHandle(
ke,
() => ({
// we agreed that each element will have focus method exposed
element: s.current,
actionElement: he.current,
value: l,
focus: Y
}),
[l, Y]
);
const Ie = !!(_ && j && _ <= j.medium && ye);
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 r = t.useCallback(
(e, i) => {
v || (!e && !i && s && s.current && s.current.focus(), Re(e));
},
[v]
), ee = t.useMemo(() => new Ge({
root: s,
selectors: [".k-colorpicker", ".k-color-picker-popup"],
tabIndex: 0,
keyboardEvents: {
keydown: {
Escape: (e, i, n) => {
r(!1);
},
Enter: (e, i, n) => {
!v && e === s.current && (n.preventDefault(), n.stopPropagation(), r(!0));
},
ArrowDown: (e, i, n) => {
n.altKey && (n.preventDefault(), n.stopPropagation(), r(!0));
},
ArrowUp: (e, i, n) => {
n.altKey && (n.preventDefault(), n.stopPropagation(), r(!1));
},
Tab: (e, i, n) => {
var h, le, ie;
if (Me(document) !== s.current) {
const ce = (h = T.current) == null ? void 0 : h.wrapperRef.current, A = (le = y.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
d === "palette" && ce ? I(n, ce) : d === "gradient" && A ? I(n, A) : d === "combo" && A ? I(n, A.parentElement) : c && se && I(n, se);
}
}
}
}
}), [r, v]), ze = t.useCallback(ee.triggerKeyboardEvent.bind(ee), []), Be = t.useCallback(() => {
v || (y.current && y.current.wrapperRef.current ? ue(y.current.wrapperRef.current) : T.current ? T.current.focus() : f.current && f.current.element && ue(f.current.element));
}, [v]), R = (e) => X.current = e, te = t.useCallback(
(e) => {
const i = {
value: X.current,
nativeEvent: e.nativeEvent,
syntheticEvent: e
};
p(i), r(!g, !0);
},
[g]
), $ = t.useCallback(() => {
r(!1, !0);
}, [r]), 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) : Q(!0), H && H.call(void 0, {
nativeEvent: e.nativeEvent,
syntheticEvent: e
});
},
[H]
), xe = t.useCallback(() => {
r(!1, !0), Q(!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]
), p = 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
}
}), r(!1);
},
[K, V]
), ne = t.useCallback(
(e) => p(e, !0),
[Z, p]
), G = t.useCallback(
(e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
et,
{
...C,
_adaptive: e,
ref: y,
isInsidePopup: !0,
size: e ? "large" : u,
fillMode: S,
value: l,
onChange: p
}
), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
tt,
{
...x,
ref: T,
size: e ? "large" : u,
value: l,
onChange: ne
}
), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
z,
{
...w,
_gradientSettings: { _adaptive: e, ...C },
ref: f,
size: e ? "large" : u,
views: ["gradient", "palette"],
activeView: q,
setOpen: r,
showButtons: !e,
value: l,
onChange: p,
setAdaptiveModeValue: R
}
), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
z,
{
...w,
_gradientSettings: { _adaptive: e, ...C },
ref: f,
size: e ? "large" : u,
views: ["palette", "gradient"],
setOpen: r,
showButtons: !e,
value: l,
onChange: p,
setAdaptiveModeValue: R
}
), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
z,
{
...w,
_gradientSettings: { _adaptive: e, ...C },
ref: f,
size: e ? "large" : u,
views: ["gradient"],
showButtons: !e,
setOpen: r,
value: l,
onChange: p,
setAdaptiveModeValue: R
}
), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
z,
{
...w,
_paletteSettings: x,
_gradientSettings: { _adaptive: e, ...C },
ref: f,
size: e ? "large" : u,
views: ["palette"],
showButtons: !e,
setOpen: r,
value: l,
onChange: p,
setAdaptiveModeValue: R
}
), Ce && /* @__PURE__ */ t.createElement(Ze, null)),
[
q,
S,
w,
C,
p,
ne,
x,
r,
u,
l,
d,
c
]
), Oe = t.useCallback(() => {
var i;
const e = {
animation: !!((i = m == null ? void 0 : m.animate) == null || i),
title: J,
expand: g,
onClose: $,
windowWidth: _,
footer: {
cancelText: b.toLanguageString(fe, B[fe]),
onCancel: $,
applyText: b.toLanguageString(me, B[me]),
onApply: te
}
};
return /* @__PURE__ */ t.createElement(it, { ...e }, /* @__PURE__ */ t.createElement(ct, { overflowHidden: !0 }, G(!0)));
}, [
m == null ? void 0 : m.animate,
J,
g,
$,
_,
b,
te,
G
]), Fe = t.useCallback((e) => {
for (const i of e)
Ae(i.target.clientWidth);
}, []), ae = je(s, o.dir), Ve = Ee !== !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": g,
"aria-controls": `k-colorpicker-popup-${(re = o.id) != null ? re : 0}`,
"aria-disabled": N ? "true" : void 0,
className: M("k-colorpicker", "k-picker", "k-icon-picker", {
[`k-picker-${de.sizeMap[u] || u}`]: u,
[`k-picker-${S}`]: S,
[`k-rounded-${de.roundedMap[L] || L}`]: L,
"k-invalid": !Ve,
"k-disabled": N,
"k-focus": Se,
className: we
}),
ref: s,
tabIndex: qe(be, N),
title: o.title,
onKeyDown: ze,
onFocus: Le,
onBlur: Ne,
dir: ae
},
/* @__PURE__ */ t.createElement(
Ye,
{
dir: ae,
open: g,
onOpen: Be,
popupAnchor: s.current || void 0,
popupSettings: { id: `k-colorpicker-popup-${(oe = o.id) != null ? oe : 0}`, ...m },
input: /* @__PURE__ */ t.createElement("span", { onClick: De, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
"span",
{
className: M("k-value-icon", "k-color-preview", {
"k-no-color": !l,
"k-icon-color-preview": O || F || P
})
},
P && /* @__PURE__ */ t.createElement("span", { className: M("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: () => r(!g),
className: "k-input-button",
rounded: null,
icon: "caret-alt-down",
svgIcon: ot,
"aria-label": b.toLanguageString(
ve,
B[ve]
)
}
),
content: G(!1),
_mobileMode: Ie,
_actionSheet: Oe()
}
)
);
});
ge.propTypes = {
value: a.string,
defaultValue: a.string,
disabled: a.bool,
view: a.oneOf(["gradient", "palette", "combo"]),
views: a.arrayOf(a.oneOf(["gradient", "palette"])),
dir: a.string,
id: a.string,
icon: a.string,
svgIcon: Qe,
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,
adaptive: a.bool,
adaptiveTitle: a.string
};
const k = {
size: "medium",
rounded: "medium",
fillMode: "solid",
view: "palette",
views: ["gradient", "palette"],
gradientSettings: st,
paletteSettings: ut
};
ge.displayName = "KendoColorPicker";
export {
ge as ColorPicker,
dt as ColorPickerPropsContext
};