@progress/kendo-react-layout/drawer/DrawerNavigation.js

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
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),u=require("prop-types"),G=require("./context/DrawerContext.js"),J=require("./DrawerItem.js"),w=require("@progress/kendo-react-common");function Q(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const o in a)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(a,o);Object.defineProperty(l,o,d.get?d:{enumerable:!0,get:()=>a[o]})}}return l.default=a,Object.freeze(l)}const t=Q($),V=240,Y=50,Z={type:"slide",duration:200},ee={type:"slide",duration:0},b=t.forwardRef((a,l)=>{const{children:o,className:d,style:k}=a,{animation:y,expanded:v,mode:p,position:c,onOverlayClick:C,mini:i,dir:N,width:D,miniWidth:g,items:T,item:A,onSelect:W}=t.useContext(G.DrawerContext),m=t.useRef(null),_=t.useCallback(()=>{m.current&&m.current.focus()},[]),e=typeof y!="boolean"?y:y===!1?ee:Z,I=D||V,E=g||Y;t.useImperativeHandle(l,()=>({element:m.current,focus:_}));const M=t.useMemo(()=>"k-drawer "+w.classNames({"k-drawer-start":c==="start","k-drawer-end":c==="end"},d),[c]),P={opacity:1,flexBasis:I,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},R={opacity:1,transform:"translateX(0px)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},j={opacity:i?1:0,flexBasis:i?E:0,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},S={opacity:0,transform:"translateX(-100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},q={opacity:0,transform:"translateX(100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},O={transform:"translateX(0%)",WebkitTransitionDuration:(e&&e.duration)+"ms",transitionDuration:(e&&e.duration)+"ms"},X=v?p==="push"?P:R:p==="push"?j:N==="ltr"&&c==="start"||N==="rtl"&&c==="end"?i?O:S:i?O:q,h=t.useMemo(()=>new w.Navigation({root:m,selectors:["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],keyboardEvents:{keydown:{ArrowDown:(n,r,s)=>{s.preventDefault(),r.focusNext(n)},ArrowUp:(n,r,s)=>{s.preventDefault(),r.focusPrevious(n)},Enter:(n,r,s)=>{s.preventDefault(),n.click()}}},tabIndex:0,rovingTabIndex:!0}),[]),F=t.useCallback(h.triggerKeyboardEvent.bind(h),[]),L=T&&t.createElement("ul",{className:"k-drawer-items",role:"menubar","aria-orientation":"vertical",onKeyDown:F},T.map((n,r)=>{const{className:s,level:f,...U}=n,H=f!=null?f:0,K=w.classNames(s,i?"":`k-level-${H}`),B={index:r,className:K,...U,onSelect:W},z=A||J.DrawerItem;return t.createElement(z,{key:r,...B})})),x=t.createElement("div",{style:e?{...X,...k}:k,className:M,ref:m},t.createElement("div",{className:"k-drawer-wrapper",style:!v&&i&&p==="overlay"?{width:E}:{width:I}},L||o));return p==="overlay"?t.createElement(t.Fragment,null,v&&t.createElement("div",{className:"k-overlay",onClick:C}),x):x});b.propTypes={children:u.any,className:u.string,style:u.object,item:u.any,tabIndex:u.number};b.displayName="KendoDrawerNavigation";exports.DrawerNavigation=b;