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