@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
111 lines (110 loc) • 3.3 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 e from "react";
import n from "prop-types";
import { dispatchEvent as k, Keys as p, useAsyncFocusBlur as w, classNames as v, useRtl as F, getTabIndex as S, IconWrap as D } from "@progress/kendo-react-common";
import { chevronDownIcon as K, chevronUpIcon as A } from "@progress/kendo-svg-icons";
const I = e.forwardRef((a, y) => {
const i = e.useRef(null), [N, u] = e.useState(!1), r = e.useCallback(() => ({ element: i.current }), []);
e.useImperativeHandle(y, r);
const {
expanded: o = !1,
disabled: l,
title: m,
subtitle: b,
onAction: s,
expandIcon: d,
collapseIcon: c,
expandSVGIcon: f,
collapseSVGIcon: x
} = a, h = e.useCallback(
(t) => {
k(s, t, r(), {
expanded: o
});
},
[s, o]
), C = e.useCallback(
(t) => {
(t.keyCode === p.enter || t.keyCode === p.space) && (t.preventDefault(), k(s, t, r(), {
expanded: o
}));
},
[s, o]
), E = e.useCallback(() => {
a.disabled || u(!0);
}, [a.disabled]), g = e.useCallback(() => {
a.disabled || u(!1);
}, [a.disabled]), { onFocus: B, onBlur: R } = w({ onFocus: E, onBlur: g });
return /* @__PURE__ */ e.createElement(
"div",
{
ref: i,
className: v("k-expander", a.className, {
"k-expanded": o,
"k-focus": N && !l,
"k-disabled": l
}),
onFocus: B,
onBlur: R,
style: a.style,
id: a.id,
dir: F(i, a.dir),
onKeyDown: l ? void 0 : C
},
/* @__PURE__ */ e.createElement(
"div",
{
role: "button",
"aria-controls": a.ariaControls,
"aria-expanded": o,
"aria-disabled": l,
tabIndex: S(a.tabIndex, l),
className: "k-expander-header",
onClick: l ? void 0 : h
},
m !== void 0 ? /* @__PURE__ */ e.createElement("div", { className: "k-expander-title" }, m) : void 0,
/* @__PURE__ */ e.createElement("span", { className: "k-spacer" }),
b !== void 0 ? /* @__PURE__ */ e.createElement("div", { className: "k-expander-sub-title" }, b) : void 0,
/* @__PURE__ */ e.createElement("span", { className: "k-expander-indicator" }, /* @__PURE__ */ e.createElement(
D,
{
name: o ? c ? void 0 : "chevron-up" : d ? void 0 : "chevron-down",
icon: o ? !x && !c ? A : x : !f && !d ? K : f,
className: v(
o ? {
[String(c)]: !!c
} : {
[String(d)]: !!d
}
)
}
))
),
a.children
);
});
I.propTypes = {
children: n.node,
className: n.string,
style: n.object,
dir: n.string,
id: n.string,
tabIndex: n.number,
title: n.node,
subtitle: n.node,
expandIcon: n.string,
collapseIcon: n.string,
expanded: n.bool,
disabled: n.bool,
onAction: n.func
};
I.displayName = "KendoReactExpansionPanel";
export {
I as ExpansionPanel
};