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

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