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