@progress/kendo-react-layout/bottomnavigation/BottomNavigation.js

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
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),n=require("prop-types"),l=require("@progress/kendo-react-common"),I=require("./models/utils.js"),B=require("./BottomNavigationItem.js"),K=require("@progress/kendo-react-intl"),y=require("./messages/index.js");function P(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const c=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(s,i,c.get?c:{enumerable:!0,get:()=>e[i]})}}return s.default=e,Object.freeze(s)}const o=P(j),C=o.forwardRef((e,s)=>{const i=o.useRef(null),c=o.useCallback(()=>{i.current&&l.focusFirstFocusableChild(i.current)},[]),m=o.useCallback(()=>({element:i.current,focus:c}),[c]);o.useImperativeHandle(s,m);const{positionMode:M=d.positionMode,itemFlow:S=d.itemFlow,border:k=d.border,className:h,items:r,item:w,itemRender:E,disabled:b,style:R,id:p,onSelect:f,onKeyDown:N}=e,D=K.useLocalization(),O=l.useId(),L=l.useDir(i,e.dir),v=o.useMemo(()=>e.fillMode===null?null:e.fillMode||d.fillMode,[e.fillMode]),g=o.useMemo(()=>e.themeColor||d.themeColor,[e.themeColor]),q=o.useMemo(()=>l.classNames("k-bottom-nav",I.POSITION_MODE_CLASSES[M],I.ITEM_FLOW_CLASSES[S],{[`k-bottom-nav-${v}`]:v,[`k-bottom-nav-${g}`]:!!g,"k-bottom-nav-border":k,"k-disabled":b},h),[M,g,v,S,k,b,h]),u=o.useCallback((t,a)=>{r&&!r[a].disabled&&f&&l.dispatchEvent(f,t,m(),{itemTarget:r[a],itemIndex:a})},[r,f]),F=o.useCallback((t,a)=>{u(t,a)},[u]),T=o.useCallback((t,a)=>{switch(t.keyCode){case l.Keys.enter:case l.Keys.space:u(t,a),t.preventDefault();break}l.dispatchEvent(N,t,m(),void 0)},[u,N]),_=D.toLanguageString(y.bottomNavigationAriaLabel,y.messages[y.bottomNavigationAriaLabel]);return o.createElement("nav",{ref:i,className:q,style:R,id:p||O,dir:L,"aria-label":_},r&&r.map((t,a)=>o.createElement(B.BottomNavigationItem,{...t,key:a,index:a,id:`${p||O}-${a}`,disabled:b||t.disabled,selected:t.selected,dataItem:t,item:w,render:E,onSelect:F,onKeyDown:T})))}),d={themeColor:void 0,fillMode:void 0,itemFlow:"vertical",positionMode:"fixed",border:!0};C.propTypes={className:n.string,style:n.object,id:n.string,dir:n.string,themeColor:n.oneOf(["base","primary","secondary","tertiary","inverse"]),fillMode:n.oneOf(["solid","flat"]),itemFlow:n.oneOf(["vertical","horizontal"]),border:n.bool,disabled:n.bool,selected:n.number,onSelect:n.func};C.displayName="KendoReactBottomNavigation";exports.BottomNavigation=C;