@progress/kendo-react-layout/expansionpanel/ExpansionPanel.mjs

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 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 { useId as F, dispatchEvent as v, Keys as I, useAsyncFocusBlur as S, useRtl as D, classNames as u, getTabIndex as K, IconWrap as A } from "@progress/kendo-react-common";
import { chevronDownIcon as P, chevronUpIcon as T } from "@progress/kendo-svg-icons";
const y = e.forwardRef((a, N) => {
  const i = e.useRef(null), [h, m] = e.useState(!1), b = F(), r = e.useCallback(() => ({ element: i.current }), []);
  e.useImperativeHandle(N, r);
  const {
    expanded: t = !1,
    disabled: o,
    title: k,
    subtitle: p,
    onAction: d,
    expandIcon: s,
    collapseIcon: c,
    expandSVGIcon: x,
    collapseSVGIcon: f
  } = a, E = e.useCallback(
    (l) => {
      v(d, l, r(), {
        expanded: t
      });
    },
    [d, t]
  ), C = e.useCallback(
    (l) => {
      (l.keyCode === I.enter || l.keyCode === I.space) && (l.preventDefault(), v(d, l, r(), {
        expanded: t
      }));
    },
    [d, t]
  ), g = e.useCallback(() => {
    a.disabled || m(!0);
  }, [a.disabled]), w = e.useCallback(() => {
    a.disabled || m(!1);
  }, [a.disabled]), { onFocus: B, onBlur: R } = S({ onFocus: g, onBlur: w });
  return /* @__PURE__ */ e.createElement(
    "div",
    {
      ref: i,
      className: u("k-expander", a.className, {
        "k-expanded": t,
        "k-focus": h && !o,
        "k-disabled": o
      }),
      onFocus: B,
      onBlur: R,
      style: a.style,
      id: a.id,
      dir: D(i, a.dir),
      onKeyDown: o ? void 0 : C
    },
    /* @__PURE__ */ e.createElement(
      "div",
      {
        role: "button",
        "aria-controls": a.ariaControls || b,
        "aria-expanded": t,
        "aria-disabled": o || void 0,
        tabIndex: K(a.tabIndex, o),
        className: "k-expander-header",
        onClick: o ? void 0 : E
      },
      k !== void 0 ? /* @__PURE__ */ e.createElement("div", { className: "k-expander-title" }, k) : void 0,
      /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }),
      p !== void 0 ? /* @__PURE__ */ e.createElement("div", { className: "k-expander-sub-title" }, p) : void 0,
      /* @__PURE__ */ e.createElement("span", { className: "k-expander-indicator" }, /* @__PURE__ */ e.createElement(
        A,
        {
          name: t ? c ? void 0 : "chevron-up" : s ? void 0 : "chevron-down",
          icon: t ? !f && !c ? T : f : !x && !s ? P : x,
          className: u(
            t ? {
              [String(c)]: !!c
            } : {
              [String(s)]: !!s
            }
          )
        }
      ))
    ),
    /* @__PURE__ */ e.createElement("div", { id: b, className: u("k-expander-content-wrapper", { "k-hidden": !t }) }, a.children)
  );
});
y.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
};
y.displayName = "KendoReactExpansionPanel";
export {
  y as ExpansionPanel
};