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