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