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