@progress/kendo-react-buttons
Version:
All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package
194 lines (193 loc) • 6.49 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 a from "react";
import l from "prop-types";
import { ChipListSelectionContext as H, ChipListFocusContext as U, ChipListDataContext as W } from "./chip-list-contexts.mjs";
import { useDir as j, Keys as u, useMouse as q, getTabIndex as G, classNames as M, kendoThemeMaps as O, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
import { xCircleIcon as w } from "@progress/kendo-svg-icons";
import { FOCUS_ACTION as v } from "./focus-reducer.mjs";
import { CHIP_DATA_ACTION as J } from "./data-reducer.mjs";
import { SELECTION_ACTION as x } from "./selection-reducer.mjs";
const z = a.forwardRef((e, A) => {
const c = a.useRef(null), d = a.useRef(null), {
disabled: y = n.disabled,
fillMode: r = n.fillMode,
themeColor: N = n.themeColor,
size: f = n.size,
rounded: h = n.rounded,
dir: B = n.dir,
removeIcon: D = n.removeIcon,
removeSvgIcon: F = n.removeSvgIcon,
removable: s = n.removable
} = e, R = j(d, B);
a.useImperativeHandle(c, () => ({
element: d.current,
props: e
})), a.useImperativeHandle(A, () => c.current);
const [m, i] = a.useContext(H), [S, o] = a.useContext(U), [, T] = a.useContext(W), k = a.useMemo(() => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value), [e.selected, e.value, m]), b = a.useMemo(() => S === e.value, [e.value, S]);
a.useEffect(() => {
b && d.current && d.current.focus();
}, [b]);
const K = a.useCallback(
(t) => {
i({ type: x.toggle, payload: e.value, event: t });
},
[i, e.value]
), g = a.useCallback(
(t) => {
s && (T({ type: J.remove, payload: e.value, event: t }), o({ type: v.reset, payload: e.value, event: t }), i({ type: x.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(void 0, {
target: c.current,
syntheticEvent: t
}));
},
[e.onRemove, e.value, s, T, o, i]
), $ = a.useCallback(
(t) => {
switch (t.keyCode) {
case u.left:
o({ type: v.prev, payload: e.value, event: t });
break;
case u.right:
o({ type: v.next, payload: e.value, event: t });
break;
case u.enter:
i({ type: x.toggle, payload: e.value, event: t });
break;
case u.delete:
g(t);
break;
}
e.onKeyDown && e.onKeyDown.call(void 0, {
target: c.current,
syntheticEvent: t
});
},
[e.onKeyDown, e.value, o, i, g]
), L = a.useCallback(
(t) => {
o({ payload: e.value, type: v.current, event: t }), e.onFocus && e.onFocus.call(void 0, {
target: c.current,
syntheticEvent: t
});
},
[e.onFocus, e.value, o]
), P = a.useCallback(
(t) => {
e.onBlur && e.onBlur.call(void 0, {
target: c.current,
syntheticEvent: t
});
},
[e.onBlur]
), _ = q(e, c, { onClick: K });
return /* @__PURE__ */ a.createElement(
"div",
{
..._,
role: e.role || "button",
id: e.value,
style: e.style,
ref: d,
dir: R,
tabIndex: G(e.tabIndex, y, void 0),
className: M(
"k-chip",
{
"k-rtl": R === "rtl",
"k-disabled": y,
"k-selected": k,
"k-focus": b,
[`k-chip-${O.sizeMap[f] || f}`]: f,
[`k-rounded-${O.roundedMap[h] || h}`]: h,
[`k-chip-${r}`]: r,
[`k-chip-${r}-${N}`]: !!(r && N)
},
e.className
),
"aria-pressed": e.role ? void 0 : k,
"aria-disabled": y,
"aria-describedby": e.ariaDescribedBy,
"aria-keyshortcuts": s ? "Enter Delete" : void 0,
onFocus: L,
onBlur: P,
onKeyDown: $
},
k && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
I,
{
className: "k-chip-icon",
name: e.selectedIcon ? C(e.selectedIcon) : void 0,
icon: e.selectedSvgIcon,
size: "small"
}
),
(e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
I,
{
className: "k-chip-icon",
name: e.icon ? C(e.icon) : void 0,
icon: e.svgIcon,
size: "small"
}
),
e.avatar && /* @__PURE__ */ a.createElement(
"div",
{
className: `k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,
style: e.avatar.style
},
/* @__PURE__ */ a.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ a.createElement("img", { src: e.avatar.image, alt: e.avatar.imageAlt }))
),
/* @__PURE__ */ a.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ a.createElement("span", { "aria-label": e.ariaLabel || e.text, className: "k-chip-label" }, e.text)),
s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: M("k-chip-action", "k-chip-remove-action"), onClick: g }, /* @__PURE__ */ a.createElement(
I,
{
name: D ? C(D) : void 0,
icon: F || w,
size: "small"
}
)))
);
}), Q = {
id: l.string,
text: l.string,
value: l.any,
dir: l.oneOf(["ltr", "rtl"]),
removable: l.bool,
removeIcon: l.string,
removeIconSvg: E,
disabled: l.bool,
icon: l.string,
svgIcon: E,
selectedIcon: l.string,
selectedIconSvg: E,
onRemove: l.func,
dataItem: l.any,
selected: l.bool,
ariaDescribedBy: l.string,
size: l.oneOf([null, "small", "medium", "large"]),
rounded: l.oneOf([null, "small", "medium", "large", "full"]),
fillMode: l.oneOf([null, "outline", "solid"]),
// eslint-disable-next-line max-len
themeColor: l.oneOf([null, "base", "info", "success", "warning", "error"])
}, n = {
disabled: !1,
removable: !1,
removeIcon: "k-i-x-circle",
removeSvgIcon: w,
dir: "ltr",
size: "medium",
rounded: "medium",
fillMode: "solid",
themeColor: "base"
};
z.displayName = "KendoReactChip";
z.propTypes = Q;
export {
z as Chip
};