@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 © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as n from "react";
import e from "prop-types";
import { DrawerContext as O } from "./context/DrawerContext.mjs";
import { DrawerNavigation as T } from "./DrawerNavigation.mjs";
import { useDir as W, classNames as j } from "@progress/kendo-react-common";
const u = n.forwardRef((m, p) => {
  const {
    expanded: i = r.expanded,
    mode: o = r.mode,
    position: f = r.position,
    className: v,
    drawerClassName: w,
    children: y,
    style: h,
    animation: b = r.animation,
    mini: d = r.mini,
    width: k = r.width,
    miniWidth: x,
    items: a,
    item: N,
    tabIndex: C,
    onOverlayClick: E,
    onSelect: s
  } = m, t = n.useRef(null), g = n.useCallback(() => {
    t.current && t.current.focus();
  }, []);
  n.useImperativeHandle(
    p,
    () => ({
      element: t.current,
      focus: g
    })
  );
  const D = n.useCallback(
    (S, I, l) => {
      if (a && s) {
        const P = {
          itemTarget: S,
          itemIndex: I,
          syntheticEvent: l,
          nativeEvent: l && l.nativeEvent,
          target: void 0
        };
        s.call(void 0, P);
      }
    },
    [a, s]
  ), c = W(t, m.dir), R = j(
    {
      "k-drawer-container": !0,
      "k-drawer-expanded": i,
      "k-drawer-overlay": o === "overlay",
      "k-drawer-push": o === "push",
      "k-drawer-mini": d && !i
    },
    v
  );
  return /* @__PURE__ */ n.createElement(
    O.Provider,
    {
      value: {
        animation: b,
        expanded: i,
        mode: o,
        position: f,
        mini: d,
        dir: c,
        items: a,
        item: N,
        width: k,
        miniWidth: x,
        onOverlayClick: E,
        onSelect: D
      }
    },
    /* @__PURE__ */ n.createElement("div", { className: R, ref: t, dir: c, style: h, tabIndex: C }, a && /* @__PURE__ */ n.createElement(T, { className: w }), y)
  );
});
u.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 r = {
  animation: !0,
  expanded: !1,
  mode: "overlay",
  position: "start",
  mini: !1,
  width: 240
};
u.displayName = "KendoDrawer";
export {
  u as Drawer
};