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