@progress/kendo-react-layout/drawer/Drawer.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 a from "react";
import e from "prop-types";
import { DrawerContext as M } from "./context/DrawerContext.mjs";
import { DrawerNavigation as O } from "./DrawerNavigation.mjs";
import { useWebMcpRegister as T, useDir as j, classNames as K } from "@progress/kendo-react-common";
const w = a.forwardRef((t, v) => {
  const {
    expanded: o = n.expanded,
    mode: s = n.mode,
    position: b = n.position,
    className: y,
    drawerClassName: h,
    children: k,
    style: x,
    animation: N = n.animation,
    mini: m = n.mini,
    width: g = n.width,
    miniWidth: C,
    items: i,
    item: E,
    tabIndex: R,
    onOverlayClick: D,
    onSelect: l
  } = t, r = a.useRef(null), c = a.useRef(null), u = a.useCallback(() => {
    r.current && r.current.focus();
  }, []), f = a.useCallback(
    () => ({
      element: r.current,
      focus: u
    }),
    [u]
  );
  a.useImperativeHandle(v, f), a.useImperativeHandle(c, f), T("drawer", c, t, t.webMcp);
  const H = a.useCallback(
    (S, P, d) => {
      if (i && l) {
        const W = {
          itemTarget: S,
          itemIndex: P,
          syntheticEvent: d,
          nativeEvent: d && d.nativeEvent,
          target: void 0
        };
        l.call(void 0, W);
      }
    },
    [i, l]
  ), p = j(r, t.dir), I = K(
    {
      "k-drawer-container": !0,
      "k-drawer-expanded": o,
      "k-drawer-overlay": s === "overlay",
      "k-drawer-push": s === "push",
      "k-drawer-mini": m && !o
    },
    y
  );
  return /* @__PURE__ */ a.createElement(
    M.Provider,
    {
      value: {
        animation: N,
        expanded: o,
        mode: s,
        position: b,
        mini: m,
        dir: p,
        items: i,
        item: E,
        width: g,
        miniWidth: C,
        onOverlayClick: D,
        onSelect: H
      }
    },
    /* @__PURE__ */ a.createElement("div", { className: I, ref: r, dir: p, style: x, tabIndex: R }, i && /* @__PURE__ */ a.createElement(O, { className: h }), k)
  );
});
w.propTypes = {
  animation: e.any,
  expanded: e.bool,
  children: e.any,
  className: e.string,
  dir: e.string,
  mode: e.string,
  position: e.string,
  mini: e.bool,
  style: e.object,
  tabIndex: e.number,
  width: e.number,
  miniWidth: e.number,
  selected: e.number,
  onSelect: e.func,
  onOverlayClick: e.func
};
const n = {
  animation: !0,
  expanded: !1,
  mode: "overlay",
  position: "start",
  mini: !1,
  width: 240
};
w.displayName = "KendoDrawer";
export {
  w as Drawer
};