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