@progress/kendo-react-layout 9.0.0-develop.2 → 9.0.0-develop.20

package/actionsheet/ActionSheet.mjs

@@ -6,179 +6,168 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import p from "prop-types";
-import { Animation as g } from "@progress/kendo-react-animation";
-import { validatePackage as N, FOCUSABLE_ELEMENTS as S, Navigation as C, classNames as x } from "@progress/kendo-react-common";
-import { packageMetadata as D } from "../package-metadata.mjs";
-import { ActionSheetItem as E } from "./ActionSheetItem.mjs";
-import { headerDisplayName as v } from "./ActionSheetHeader.mjs";
-import { footerDisplayName as I } from "./ActionSheetFooter.mjs";
-import { contentDisplayName as w } from "./ActionSheetContent.mjs";
-const m = class m extends e.Component {
-  /** @hidden */
-  constructor(o) {
-    super(o), this.actionSheetRef = e.createRef(), this.actionSheetTitleClass = "k-actionsheet-title", this.ariaLabeledBy = this.actionSheetTitleClass, this.animationDuration = 300, this.bottomPosition = { bottom: "0", width: "100%" }, this.handleKeyDown = (t) => {
-      this.props.navigatable && this.navigation.triggerKeyboardEvent(t);
-    }, this.onTab = (t, a, i) => {
-      i.preventDefault(), i.shiftKey ? a.focusPrevious(t) : a.focusNext(t);
-    }, this.handleOverlayClick = (t) => {
-      this.props.onOverlayClick && this.props.onOverlayClick.call(void 0, t), this.props.onClose && this.props.onClose.call(void 0, t), this.props.animation || this.hideActionSheet();
-    }, this.handleItemClick = (t) => {
-      this.props.onItemClick && this.props.onItemClick.call(void 0, t), this.props.onItemSelect && this.props.onItemSelect.call(void 0, t), this.props.animation || this.hideActionSheet();
-    }, this.onEnter = (t, a, i) => {
-      if (t.ariaDisabled)
-        return;
-      const h = t.className && t.className.indexOf ? t.className.indexOf("k-actionsheet-item") !== -1 : !1, l = a.elements.filter((s) => s.className.indexOf("k-actionsheet-item") !== -1);
-      if (h && this.props.onItemClick) {
-        i.preventDefault();
-        const s = this.props.items[l.indexOf(t)];
-        this.props.onItemClick.call(void 0, {
-          syntheticEvent: i,
-          item: s,
-          title: s && s.title
-        });
-      }
-      if (h && this.props.onItemSelect) {
-        i.preventDefault();
-        const s = this.props.items[l.indexOf(t)];
-        this.props.onItemSelect.call(void 0, {
-          syntheticEvent: i,
-          item: s,
-          title: s && s.title
-        });
-      }
-      this.props.animation || this.hideActionSheet();
-    }, this.onEscape = (t, a, i) => {
-      this.props.onOverlayClick && (i.preventDefault(), this.props.onOverlayClick.call(void 0, i)), this.props.onClose && (i.preventDefault(), this.props.onClose.call(void 0, i)), this.props.animation || this.hideActionSheet();
-    }, this.hideActionSheet = () => {
-      this.setState({ show: !1 });
-    }, this.children = (t) => {
-      const a = {};
-      return e.Children.forEach(t, (i) => {
-        i && (a[i.type.displayName] = i);
-      }), a;
-    }, this.state = {
-      show: !1,
-      slide: !1
-    }, N(D);
-  }
-  /** @hidden */
-  componentDidMount() {
-    this.props.expand && !this.state.show && this.setState({ show: !0 });
-  }
-  /** @hidden */
-  componentDidUpdate(o, t) {
-    const a = this.actionSheetRef.current;
-    if (this.props.expand && !this.state.show && this.setState({ show: !0 }), this.props.expand && this.state.show && !this.state.slide && this.setState({ slide: !0 }), !this.props.expand && this.state.show && this.state.slide && this.setState({ slide: !1 }), t !== this.state && this.state.slide && a && !this.props.className && (a.style.setProperty("--kendo-actionsheet-height", "auto"), a.style.setProperty("--kendo-actionsheet-max-height", "none")), a && this.props.navigatable) {
-      const h = [
-        ".k-actionsheet-item",
-        ...[
-          ".k-actionsheet-footer",
-          ".k-actionsheet-content",
-          ".k-actionsheet-titlebar"
-        ].map((l) => S.concat(this.props.navigatableElements).map(
-          (s) => `${l} ${s}`
-        )).flat()
-      ];
-      this.navigation = new C({
-        tabIndex: this.props.tabIndex || 0,
-        root: this.actionSheetRef,
+import * as n from "react";
+import r from "prop-types";
+import { Animation as q } from "@progress/kendo-react-animation";
+import { validatePackage as z, FOCUSABLE_ELEMENTS as G, Navigation as J, classNames as Q } from "@progress/kendo-react-common";
+import { packageMetadata as V } from "../package-metadata.mjs";
+import { ActionSheetItem as w } from "./ActionSheetItem.mjs";
+import { headerDisplayName as T } from "./ActionSheetHeader.mjs";
+import { footerDisplayName as W } from "./ActionSheetFooter.mjs";
+import { contentDisplayName as X } from "./ActionSheetContent.mjs";
+const P = n.forwardRef((e, A) => {
+  var D, R;
+  z(V);
+  const {
+    navigatableElements: K = O.navigatableElements,
+    navigatable: b = O.navigatable
+  } = e, _ = (t, i, a) => {
+    a.preventDefault(), a.shiftKey ? i.focusPrevious(t) : i.focusNext(t);
+  }, H = (t, i, a) => {
+    if (t.ariaDisabled)
+      return;
+    const h = t.className && t.className.indexOf ? t.className.indexOf("k-actionsheet-item") !== -1 : !1, E = i.elements.filter((o) => o.className.indexOf("k-actionsheet-item") !== -1);
+    if (h && e.onItemClick) {
+      a.preventDefault();
+      const o = e.items[E.indexOf(t)];
+      e.onItemClick.call(void 0, {
+        syntheticEvent: a,
+        item: o,
+        title: o && o.title
+      });
+    }
+    if (h && e.onItemSelect) {
+      a.preventDefault();
+      const o = e.items[E.indexOf(t)];
+      e.onItemSelect.call(void 0, {
+        syntheticEvent: a,
+        item: o,
+        title: o && o.title
+      });
+    }
+    e.animation || s();
+  }, L = (t, i, a) => {
+    e.onOverlayClick && (a.preventDefault(), e.onOverlayClick.call(void 0, a)), e.onClose && (a.preventDefault(), e.onClose.call(void 0, a)), e.animation || s();
+  }, s = () => {
+    m({ show: !1 });
+  }, B = (t) => {
+    b && d.current.triggerKeyboardEvent(t);
+  }, F = (t) => {
+    e.onOverlayClick && e.onOverlayClick.call(void 0, t), e.onClose && e.onClose.call(void 0, t), e.animation || s();
+  }, y = (t) => {
+    e.onItemClick && e.onItemClick.call(void 0, t), e.onItemSelect && e.onItemSelect.call(void 0, t), e.animation || s();
+  }, M = (t) => {
+    const i = {};
+    return n.Children.forEach(t, (a) => {
+      a && (i[a.type.displayName] = a);
+    }), i;
+  }, N = n.useRef(null), k = n.useRef(null);
+  n.useImperativeHandle(N, () => ({ props: e })), n.useImperativeHandle(
+    A,
+    () => N.current
+  );
+  const d = n.useRef(), $ = n.useRef(e.animationDuration || 300), v = n.useRef({ bottom: "0", width: "100%" }), g = n.useRef(), [l, U] = n.useState({ show: !1, slide: !1 }), m = (t) => {
+    U((i) => ({ ...i, ...t }));
+  };
+  n.useEffect(() => {
+    e.expand && !l.show && m({ show: !0 });
+  }, []), n.useEffect(() => {
+    const t = k.current;
+    if (e.expand && !l.show && m({ show: !0 }), e.expand && l.show && !l.slide && m({ slide: !0 }), !e.expand && l.show && l.slide && m({ slide: !1 }), g !== l && l.slide && t && !e.className && (t.style.setProperty("--kendo-actionsheet-height", "auto"), t.style.setProperty("--kendo-actionsheet-max-height", "none")), t && b) {
+      const a = [".k-actionsheet-item", ...[
+        ".k-actionsheet-footer",
+        ".k-actionsheet-content",
+        ".k-actionsheet-titlebar"
+      ].map((h) => G.concat(K).map(
+        (E) => `${h} ${E}`
+      )).flat()];
+      d.current = new J({
+        tabIndex: e.tabIndex || 0,
+        root: k,
         rovingTabIndex: !1,
-        selectors: h,
+        selectors: a,
         keyboardEvents: {
           keydown: {
-            Tab: this.onTab,
-            Enter: this.onEnter,
-            Escape: this.onEscape
+            Tab: _,
+            Enter: H,
+            Escape: L
           }
         }
-      }), this.navigation.focusElement(this.navigation.first, null);
+      }), d.current.focusElement(d.current.first, null);
     }
-  }
-  /** @hidden */
-  render() {
-    const {
-      title: o,
-      subTitle: t,
-      animationStyles: a,
-      animation: i,
-      expand: h,
-      tabIndex: l,
-      items: s
-    } = this.props, r = s == null ? void 0 : s.filter((n) => !n.group || n.group === "top"), d = s == null ? void 0 : s.filter((n) => n.group === "bottom"), y = r && r.length > 0 && d && d.length > 0, f = this.children(this.props.children), u = this.props.animationDuration || this.animationDuration, k = this.state.slide && /* @__PURE__ */ e.createElement(
-      "div",
-      {
-        className: x("k-actionsheet", this.props.className, {
-          "k-actionsheet-bottom": !this.props.className
-        }),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-hidden": !1,
-        "aria-labelledby": this.ariaLabeledBy,
-        ref: this.actionSheetRef,
-        onKeyDown: this.handleKeyDown
-      },
-      f[v] && !o && !t && f[v],
-      (o || t) && /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar k-text-center" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ e.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, o && /* @__PURE__ */ e.createElement("div", null, o), t && /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-subtitle" }, t)))),
-      f[w] || /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ e.createElement("div", { className: "k-list-ul", role: "group" }, r && r.map((n, c) => /* @__PURE__ */ e.createElement(
-        E,
-        {
-          ...n,
-          id: c,
-          key: c,
-          item: n,
-          tabIndex: l || 0,
-          onClick: this.handleItemClick
-        }
-      ))), y && /* @__PURE__ */ e.createElement("hr", { className: "k-hr" }), /* @__PURE__ */ e.createElement("div", { className: "k-list-ul", role: "group" }, d && d.map((n, c) => /* @__PURE__ */ e.createElement(
-        E,
-        {
-          ...n,
-          id: c + ((r == null ? void 0 : r.length) || 0),
-          key: c,
-          item: n,
-          tabIndex: l || 0,
-          onClick: this.handleItemClick
-        }
-      )))),
-      f[I]
-    );
-    return /* @__PURE__ */ e.createElement(e.Fragment, null, h || this.state.show ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-container" }, /* @__PURE__ */ e.createElement(
-      "div",
+    g.current = { ...l };
+  });
+  const S = "k-actionsheet-title", x = S, c = (D = e.items) == null ? void 0 : D.filter(
+    (t) => !t.group || t.group === "top"
+  ), f = (R = e.items) == null ? void 0 : R.filter(
+    (t) => t.group === "bottom"
+  ), j = c && c.length > 0 && f && f.length > 0, u = M(e.children), C = e.animationDuration || $.current, I = l.slide && /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      className: Q("k-actionsheet", e.className, {
+        "k-actionsheet-bottom": !e.className
+      }),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-hidden": !1,
+      "aria-labelledby": x,
+      ref: k,
+      onKeyDown: B
+    },
+    u[T] && !e.title && !e.subTitle && u[T],
+    (e.title || e.subTitle) && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar k-text-center" }, /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ n.createElement("div", { className: S, id: x }, e.title && /* @__PURE__ */ n.createElement("div", null, e.title), e.subTitle && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-subtitle" }, e.subTitle)))),
+    u[X] || /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ n.createElement("div", { className: "k-list-ul", role: "group" }, c && c.map((t, i) => /* @__PURE__ */ n.createElement(
+      w,
       {
-        className: "k-overlay",
-        onClick: this.handleOverlayClick
+        ...t,
+        id: i,
+        key: i,
+        item: t,
+        tabIndex: e.tabIndex || 0,
+        onClick: y
       }
-    ), i ? /* @__PURE__ */ e.createElement(
-      g,
+    ))), j && /* @__PURE__ */ n.createElement("hr", { className: "k-hr" }), /* @__PURE__ */ n.createElement("div", { className: "k-list-ul", role: "group" }, f && f.map((t, i) => /* @__PURE__ */ n.createElement(
+      w,
       {
-        transitionName: this.state.slide ? "slide-up" : "slide-down",
-        onExited: this.hideActionSheet,
-        transitionEnterDuration: u,
-        transitionExitDuration: u,
-        animationEnteringStyle: a || this.bottomPosition,
-        animationEnteredStyle: a || this.bottomPosition,
-        animationExitingStyle: a || this.bottomPosition,
-        exit: !0,
-        enter: !0,
-        appear: !1
-      },
-      k
-    ) : k)) : null);
-  }
-};
-m.displayName = "KendoReactActionSheet", m.propTypes = {
-  items: p.array,
-  subTitle: p.string,
-  title: p.string,
-  navigatable: p.bool,
-  navigatableElements: p.array
-}, m.defaultProps = {
+        ...t,
+        id: i + ((c == null ? void 0 : c.length) || 0),
+        key: i,
+        item: t,
+        tabIndex: e.tabIndex || 0,
+        onClick: y
+      }
+    )))),
+    u[W]
+  );
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, e.expand || l.show ? /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-container" }, /* @__PURE__ */ n.createElement("div", { className: "k-overlay", onClick: F }), e.animation ? /* @__PURE__ */ n.createElement(
+    q,
+    {
+      transitionName: l.slide ? "slide-up" : "slide-down",
+      onExited: s,
+      transitionEnterDuration: C,
+      transitionExitDuration: C,
+      animationEnteringStyle: e.animationStyles || v.current,
+      animationEnteredStyle: e.animationStyles || v.current,
+      animationExitingStyle: e.animationStyles || v.current,
+      exit: !0,
+      enter: !0,
+      appear: !1
+    },
+    I
+  ) : I) : null);
+}), O = {
   navigatable: !0,
   navigatableElements: []
 };
-let b = m;
+P.propTypes = {
+  items: r.array,
+  subTitle: r.string,
+  title: r.string,
+  navigatable: r.bool,
+  navigatableElements: r.array
+};
+P.displayName = "KendoReactActionSheet";
 export {
-  b as ActionSheet
+  P as ActionSheet,
+  O as actionSheetDefaultProps
 };

package/actionsheet/ActionSheetFooter.mjs

@@ -9,16 +9,7 @@
 import * as r from "react";
 import t from "prop-types";
 import { classNames as s } from "@progress/kendo-react-common";
-const a = "ActionSheetFooter", e = (o) => /* @__PURE__ */ r.createElement(
-  "div",
-  {
-    className: s(
-      "k-actionsheet-footer",
-      o.className
-    )
-  },
-  o.children
-);
+const a = "ActionSheetFooter", e = (o) => /* @__PURE__ */ r.createElement("div", { className: s("k-actionsheet-footer", o.className) }, o.children);
 e.propTypes = {
   className: t.string
 };

package/actionsheet/ActionSheetHeader.mjs

@@ -9,16 +9,7 @@
 import * as r from "react";
 import t from "prop-types";
 import { classNames as s } from "@progress/kendo-react-common";
-const c = "ActionSheetHeader", e = (a) => /* @__PURE__ */ r.createElement(
-  "div",
-  {
-    className: s(
-      "k-actionsheet-titlebar",
-      a.className
-    )
-  },
-  a.children
-);
+const c = "ActionSheetHeader", e = (a) => /* @__PURE__ */ r.createElement("div", { className: s("k-actionsheet-titlebar", a.className) }, a.children);
 e.propTypes = {
   className: t.string
 };

package/actionsheet/ActionSheetItem.mjs

@@ -10,13 +10,16 @@ import * as t from "react";
 import i from "prop-types";
 import { classNames as l } from "@progress/kendo-react-common";
 const s = (e) => {
-  const a = t.useRef(null), c = t.useCallback((n) => {
-    e.onClick && e.onClick.call(void 0, {
-      syntheticEvent: n,
-      item: e.item,
-      title: e.title
-    });
-  }, [e.item, e.title, e.onClick]);
+  const a = t.useRef(null), c = t.useCallback(
+    (n) => {
+      e.onClick && e.onClick.call(void 0, {
+        syntheticEvent: n,
+        item: e.item,
+        title: e.title
+      });
+    },
+    [e.item, e.title, e.onClick]
+  );
   return t.useEffect(() => {
     a.current && e.focused && a.current.focus();
   }, [e.focused]), /* @__PURE__ */ t.createElement(

package/appbar/AppBar.mjs

@@ -12,17 +12,9 @@ import { validatePackage as h, focusFirstFocusableChild as C, useId as y, classN
 import { packageMetadata as N } from "../package-metadata.mjs";
 const l = e.forwardRef((o, m) => {
   h(N);
-  const {
-    children: d,
-    className: r,
-    style: u,
-    id: f
-  } = o, a = e.useRef(null), p = e.useCallback(
-    () => {
-      a.current && C(a.current);
-    },
-    []
-  ), b = e.useCallback(
+  const { children: d, className: r, style: u, id: f } = o, a = e.useRef(null), p = e.useCallback(() => {
+    a.current && C(a.current);
+  }, []), b = e.useCallback(
     () => ({
       element: a.current,
       focus: p
@@ -30,16 +22,7 @@ const l = e.forwardRef((o, m) => {
     [p]
   );
   e.useImperativeHandle(m, b);
-  const k = y(), i = e.useMemo(
-    () => o.themeColor || c.themeColor,
-    [o.themeColor]
-  ), n = e.useMemo(
-    () => o.position || c.position,
-    [o.position]
-  ), s = e.useMemo(
-    () => o.positionMode || c.positionMode,
-    [o.positionMode]
-  ), M = e.useMemo(
+  const k = y(), i = e.useMemo(() => o.themeColor || c.themeColor, [o.themeColor]), n = e.useMemo(() => o.position || c.position, [o.position]), s = e.useMemo(() => o.positionMode || c.positionMode, [o.positionMode]), M = e.useMemo(
     () => g(
       "k-appbar",
       {
@@ -54,15 +37,7 @@ const l = e.forwardRef((o, m) => {
     ),
     [n, s, i, r]
   );
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: M,
-      style: u,
-      id: f || k
-    },
-    d
-  );
+  return /* @__PURE__ */ e.createElement("div", { className: M, style: u, id: f || k }, d);
 });
 l.propTypes = {
   children: t.any,

package/appbar/AppBarSection.mjs

@@ -10,16 +10,9 @@ import * as e from "react";
 import t from "prop-types";
 import { focusFirstFocusableChild as u, classNames as f } from "@progress/kendo-react-common";
 const r = e.forwardRef((n, o) => {
-  const {
-    children: l,
-    className: a,
-    style: i
-  } = n, s = e.useRef(null), c = e.useCallback(
-    () => {
-      s.current && u(s.current);
-    },
-    []
-  ), m = e.useCallback(
+  const { children: l, className: a, style: i } = n, s = e.useRef(null), c = e.useCallback(() => {
+    s.current && u(s.current);
+  }, []), m = e.useCallback(
     () => ({
       element: s.current,
       focus: c
@@ -27,13 +20,7 @@ const r = e.forwardRef((n, o) => {
     [c]
   );
   e.useImperativeHandle(o, m);
-  const p = e.useMemo(
-    () => f(
-      "k-appbar-section",
-      a
-    ),
-    [a]
-  );
+  const p = e.useMemo(() => f("k-appbar-section", a), [a]);
   return /* @__PURE__ */ e.createElement("div", { className: p, style: i }, l);
 });
 r.propTypes = {

package/appbar/AppBarSpacer.mjs

@@ -10,16 +10,9 @@ import * as s from "react";
 import r from "prop-types";
 import { focusFirstFocusableChild as d, classNames as f } from "@progress/kendo-react-common";
 const l = s.forwardRef((n, p) => {
-  const {
-    children: o,
-    className: t,
-    style: e
-  } = n, a = s.useRef(null), c = s.useCallback(
-    () => {
-      a.current && d(a.current);
-    },
-    []
-  ), i = s.useCallback(
+  const { children: o, className: t, style: e } = n, a = s.useRef(null), c = s.useCallback(() => {
+    a.current && d(a.current);
+  }, []), i = s.useCallback(
     () => ({
       element: a.current,
       focus: c
@@ -36,12 +29,9 @@ const l = s.forwardRef((n, p) => {
       t
     ),
     [t, e]
-  ), u = s.useMemo(
-    () => ({
-      flexBasis: e && e.width ? e.width : void 0
-    }),
-    [e]
-  );
+  ), u = s.useMemo(() => ({
+    flexBasis: e && e.width ? e.width : void 0
+  }), [e]);
   return /* @__PURE__ */ s.createElement("span", { className: m, style: u }, o);
 });
 l.propTypes = {

package/bottomnavigation/BottomNavigation.mjs

@@ -14,12 +14,9 @@ import { POSITION_MODE_CLASSES as A, ITEM_FLOW_CLASSES as H } from "./models/uti
 import { BottomNavigationItem as j } from "./BottomNavigationItem.mjs";
 const I = t.forwardRef((a, p) => {
   T(L);
-  const i = t.useRef(null), b = t.useCallback(
-    () => {
-      i.current && $(i.current);
-    },
-    []
-  ), c = t.useCallback(
+  const i = t.useRef(null), b = t.useCallback(() => {
+    i.current && $(i.current);
+  }, []), c = t.useCallback(
     () => ({
       element: i.current,
       focus: b
@@ -28,9 +25,9 @@ const I = t.forwardRef((a, p) => {
   );
   t.useImperativeHandle(p, c);
   const {
-    positionMode: v = n.positionMode,
-    itemFlow: k = n.itemFlow,
-    border: C = n.border,
+    positionMode: v = s.positionMode,
+    itemFlow: k = s.itemFlow,
+    border: C = s.border,
     className: M,
     items: r,
     item: E,
@@ -40,37 +37,26 @@ const I = t.forwardRef((a, p) => {
     id: y,
     onSelect: f,
     onKeyDown: h
-  } = a, g = B(), F = P(i, a.dir), s = t.useMemo(
-    () => a.fillMode === null || a.fill === null ? null : a.fill || a.fillMode || n.fillMode,
-    [a.fillMode, a.fill]
-  ), u = t.useMemo(
-    () => a.themeColor || n.themeColor,
-    [a.themeColor]
-  ), D = t.useMemo(
+  } = a, g = B(), F = P(i, a.dir), n = t.useMemo(() => a.fillMode === null || a.fill === null ? null : a.fill || a.fillMode || s.fillMode, [a.fillMode, a.fill]), u = t.useMemo(() => a.themeColor || s.themeColor, [a.themeColor]), D = t.useMemo(
     () => _(
       "k-bottom-nav",
       A[v],
       H[k],
       {
-        [`k-bottom-nav-${s}`]: s,
-        [`k-bottom-nav-${s}-${u}`]: !!(s && u),
+        [`k-bottom-nav-${n}`]: n,
+        [`k-bottom-nav-${n}-${u}`]: !!(n && u),
         "k-bottom-nav-border": C,
         "k-disabled": m
       },
       M
     ),
-    [v, u, s, k, C, m, M]
+    [v, u, n, k, C, m, M]
   ), d = t.useCallback(
     (e, l) => {
-      r && !r[l].disabled && f && S(
-        f,
-        e,
-        c(),
-        {
-          itemTarget: r[l],
-          itemIndex: l
-        }
-      );
+      r && !r[l].disabled && f && S(f, e, c(), {
+        itemTarget: r[l],
+        itemIndex: l
+      });
     },
     [r, f]
   ), R = t.useCallback(
@@ -95,33 +81,23 @@ const I = t.forwardRef((a, p) => {
     },
     [d, h]
   );
-  return /* @__PURE__ */ t.createElement(
-    "nav",
+  return /* @__PURE__ */ t.createElement("nav", { ref: i, className: D, style: O, id: y || g, dir: F }, r && r.map((e, l) => /* @__PURE__ */ t.createElement(
+    j,
     {
-      ref: i,
-      className: D,
-      style: O,
-      id: y || g,
-      dir: F
-    },
-    r && r.map((e, l) => /* @__PURE__ */ t.createElement(
-      j,
-      {
-        ...e,
-        key: l,
-        index: l,
-        id: `${y || g}-${l}`,
-        disabled: m || e.disabled,
-        selected: e.selected,
-        dataItem: e,
-        item: E,
-        render: N,
-        onSelect: R,
-        onKeyDown: K
-      }
-    ))
-  );
-}), n = {
+      ...e,
+      key: l,
+      index: l,
+      id: `${y || g}-${l}`,
+      disabled: m || e.disabled,
+      selected: e.selected,
+      dataItem: e,
+      item: E,
+      render: N,
+      onSelect: R,
+      onKeyDown: K
+    }
+  )));
+}), s = {
   themeColor: "primary",
   fillMode: "flat",
   itemFlow: "vertical",