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

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",

package/bottomnavigation/BottomNavigationItem.mjs

@@ -10,69 +10,71 @@ import * as e from "react";
 import t from "prop-types";
 import { validatePackage as P, classNames as D, svgIconPropType as T, IconWrap as h } from "@progress/kendo-react-common";
 import { packageMetadata as B } from "../package-metadata.mjs";
-const g = e.forwardRef((i, f) => {
-  P(B);
-  const m = e.useRef(null);
-  e.useImperativeHandle(
-    f,
-    () => ({
-      element: m.current
-    })
-  );
-  const {
-    className: r,
-    style: k,
-    selected: o,
-    disabled: a,
-    item: x,
-    render: y,
-    dataItem: N,
-    icon: d,
-    svgIcon: b,
-    text: p,
-    id: C,
-    onSelect: s,
-    onKeyDown: l,
-    index: n,
-    tabIndex: E = M.tabIndex
-  } = i, R = e.useMemo(
-    () => D(
-      "k-bottom-nav-item",
-      {
-        "k-selected": o,
-        "k-disabled": a
-      },
-      r
-    ),
-    [o, a, r]
-  ), w = e.useCallback(
-    (c) => {
-      s && n !== void 0 && !a && s(c, n);
-    },
-    [s, n, a]
-  ), K = e.useCallback(
-    (c) => {
-      l && n !== void 0 && !a && l(c, n);
-    },
-    [l, n, a]
-  ), v = y, I = x, u = /* @__PURE__ */ e.createElement(
-    "span",
-    {
-      ref: m,
-      className: R,
+const g = e.forwardRef(
+  (i, f) => {
+    P(B);
+    const m = e.useRef(null);
+    e.useImperativeHandle(
+      f,
+      () => ({
+        element: m.current
+      })
+    );
+    const {
+      className: r,
       style: k,
-      role: "link",
+      selected: o,
+      disabled: a,
+      item: x,
+      render: y,
+      dataItem: N,
+      icon: d,
+      svgIcon: b,
+      text: p,
       id: C,
-      tabIndex: E,
-      onClick: w,
-      onKeyDown: K,
-      "aria-current": o,
-      "aria-disabled": a
-    },
-    I ? /* @__PURE__ */ e.createElement(I, { itemIndex: n, item: N }) : /* @__PURE__ */ e.createElement(e.Fragment, null, (d || b) && /* @__PURE__ */ e.createElement(h, { className: "k-bottom-nav-item-icon", name: d, icon: b, size: "xlarge" }), p && /* @__PURE__ */ e.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
-  );
-  return v !== void 0 ? v.call(void 0, u, i) : u;
-}), M = {
+      onSelect: s,
+      onKeyDown: l,
+      index: n,
+      tabIndex: E = M.tabIndex
+    } = i, R = e.useMemo(
+      () => D(
+        "k-bottom-nav-item",
+        {
+          "k-selected": o,
+          "k-disabled": a
+        },
+        r
+      ),
+      [o, a, r]
+    ), w = e.useCallback(
+      (c) => {
+        s && n !== void 0 && !a && s(c, n);
+      },
+      [s, n, a]
+    ), K = e.useCallback(
+      (c) => {
+        l && n !== void 0 && !a && l(c, n);
+      },
+      [l, n, a]
+    ), v = y, I = x, u = /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        ref: m,
+        className: R,
+        style: k,
+        role: "link",
+        id: C,
+        tabIndex: E,
+        onClick: w,
+        onKeyDown: K,
+        "aria-current": o,
+        "aria-disabled": a
+      },
+      I ? /* @__PURE__ */ e.createElement(I, { itemIndex: n, item: N }) : /* @__PURE__ */ e.createElement(e.Fragment, null, (d || b) && /* @__PURE__ */ e.createElement(h, { className: "k-bottom-nav-item-icon", name: d, icon: b, size: "xlarge" }), p && /* @__PURE__ */ e.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
+    );
+    return v !== void 0 ? v.call(void 0, u, i) : u;
+  }
+), M = {
   tabIndex: 0
 };
 g.propTypes = {

package/breadcrumb/Breadcrumb.mjs

@@ -25,18 +25,9 @@ const v = r.forwardRef((e, E) => {
   ), S = r.useMemo(
     () => e.breadcrumbDelimiter || R,
     [e.breadcrumbDelimiter]
-  ), F = r.useMemo(
-    () => e.breadcrumbLink || K,
-    [e.breadcrumbLink]
-  ), D = r.useCallback(
-    () => {
-      n.current && n.current.focus();
-    },
-    [n]
-  ), h = r.useMemo(
-    () => e.disabled || !1,
-    [e.disabled]
-  );
+  ), F = r.useMemo(() => e.breadcrumbLink || K, [e.breadcrumbLink]), D = r.useCallback(() => {
+    n.current && n.current.focus();
+  }, [n]), h = r.useMemo(() => e.disabled || !1, [e.disabled]);
   r.useImperativeHandle(s, () => ({
     element: n.current,
     focus: D,
@@ -69,57 +60,40 @@ const v = r.forwardRef((e, E) => {
     /* @__PURE__ */ r.createElement(f, { rootItem: !0 }, /* @__PURE__ */ r.createElement(r.Fragment, null, e.data.map((t, a, l) => {
       const d = t[I];
       if (a === 0)
-        return /* @__PURE__ */ r.createElement(
-          g,
+        return /* @__PURE__ */ r.createElement(g, { key: d, isFirstItem: !0, isLastItem: l.length - 1 === a }, /* @__PURE__ */ r.createElement(
+          F,
           {
-            key: d,
-            isFirstItem: !0,
-            isLastItem: l.length - 1 === a
-          },
-          /* @__PURE__ */ r.createElement(
-            F,
-            {
-              isLast: l.length - 1 === a,
-              isFirst: !0,
-              id: String(d),
-              icon: t[k] || void 0,
-              iconClass: t[c] ? String(t[c]) : void 0,
-              text: t[m] ? String(t[m]) : void 0,
-              disabled: t.disabled || !1,
-              onItemSelect: L,
-              onKeyDown: y,
-              ...e
-            }
-          )
-        );
+            isLast: l.length - 1 === a,
+            isFirst: !0,
+            id: String(d),
+            icon: t[k] || void 0,
+            iconClass: t[c] ? String(t[c]) : void 0,
+            text: t[m] ? String(t[m]) : void 0,
+            disabled: t.disabled || !1,
+            onItemSelect: L,
+            onKeyDown: y,
+            ...e
+          }
+        ));
     }))),
     /* @__PURE__ */ r.createElement(f, { rootItem: !1 }, /* @__PURE__ */ r.createElement(r.Fragment, null, e.data.map((t, a, l) => {
       const d = t[I];
       if (a !== 0)
-        return /* @__PURE__ */ r.createElement(
-          g,
+        return /* @__PURE__ */ r.createElement(g, { key: d, isFirstItem: !1, isLastItem: l.length - 1 === a }, /* @__PURE__ */ r.createElement(S, { dir: u }), /* @__PURE__ */ r.createElement(
+          F,
           {
-            key: d,
-            isFirstItem: !1,
-            isLastItem: l.length - 1 === a
-          },
-          /* @__PURE__ */ r.createElement(S, { dir: u }),
-          /* @__PURE__ */ r.createElement(
-            F,
-            {
-              isLast: l.length - 1 === a,
-              isFirst: !1,
-              id: String(d),
-              icon: t[k] || void 0,
-              iconClass: t[c] ? String(t[c]) : void 0,
-              text: t[m] ? String(t[m]) : void 0,
-              disabled: t.disabled || !1,
-              onItemSelect: L,
-              onKeyDown: y,
-              ...e
-            }
-          )
-        );
+            isLast: l.length - 1 === a,
+            isFirst: !1,
+            id: String(d),
+            icon: t[k] || void 0,
+            iconClass: t[c] ? String(t[c]) : void 0,
+            text: t[m] ? String(t[m]) : void 0,
+            disabled: t.disabled || !1,
+            onItemSelect: L,
+            onKeyDown: y,
+            ...e
+          }
+        ));
     })))
   );
 }), z = {
@@ -130,12 +104,14 @@ const v = r.forwardRef((e, E) => {
   breadcrumbListItem: i.elementType,
   breadcrumbDelimiter: i.elementType,
   breadcrumbLink: i.elementType,
-  data: i.arrayOf(i.shape({
-    id: i.string,
-    text: i.string,
-    icon: i.any,
-    iconClass: i.string
-  })),
+  data: i.arrayOf(
+    i.shape({
+      id: i.string,
+      text: i.string,
+      icon: i.any,
+      iconClass: i.string
+    })
+  ),
   dir: i.oneOf(["ltr", "rtl"]),
   disabled: i.bool,
   valueField: i.string,

package/breadcrumb/BreadcrumbDelimiter.mjs

@@ -11,30 +11,35 @@ import t from "prop-types";
 import { validatePackage as l, IconWrap as o } from "@progress/kendo-react-common";
 import { chevronLeftIcon as d, chevronRightIcon as s } from "@progress/kendo-svg-icons";
 import { packageMetadata as u } from "../package-metadata.mjs";
-const m = r.forwardRef((e, c) => {
-  l(u);
-  const a = r.useRef(null), n = r.useRef(null);
-  return r.useImperativeHandle(a, () => {
-    var i;
-    return {
-      element: ((i = n.current) == null ? void 0 : i.element) || null,
-      props: e
-    };
-  }), r.useImperativeHandle(c, () => a.current), /* @__PURE__ */ r.createElement(
-    o,
-    {
-      ref: n,
-      id: e.id,
-      "aria-hidden": !0,
-      tabIndex: e.tabIndex,
-      style: e.style,
-      name: e.dir === "rtl" ? "chevron-left" : "chevron-right",
-      icon: e.dir === "rtl" ? d : s,
-      className: "k-breadcrumb-delimiter-icon",
-      size: "xsmall"
-    }
-  );
-}), f = {
+const m = r.forwardRef(
+  (e, c) => {
+    l(u);
+    const a = r.useRef(null), n = r.useRef(null);
+    return r.useImperativeHandle(a, () => {
+      var i;
+      return {
+        element: ((i = n.current) == null ? void 0 : i.element) || null,
+        props: e
+      };
+    }), r.useImperativeHandle(
+      c,
+      () => a.current
+    ), /* @__PURE__ */ r.createElement(
+      o,
+      {
+        ref: n,
+        id: e.id,
+        "aria-hidden": !0,
+        tabIndex: e.tabIndex,
+        style: e.style,
+        name: e.dir === "rtl" ? "chevron-left" : "chevron-right",
+        icon: e.dir === "rtl" ? d : s,
+        className: "k-breadcrumb-delimiter-icon",
+        size: "xsmall"
+      }
+    );
+  }
+), f = {
   id: t.string,
   className: t.string,
   style: t.object,

package/breadcrumb/BreadcrumbLink.mjs

@@ -12,12 +12,9 @@ import { validatePackage as b, dispatchEvent as l, useDir as k, getTabIndex as f
 import { packageMetadata as C } from "../package-metadata.mjs";
 const r = t.forwardRef((e, s) => {
   b(C);
-  const c = t.useRef(null), i = t.useRef(null), m = t.useCallback(
-    () => {
-      i.current && i.current.focus();
-    },
-    [i]
-  );
+  const c = t.useRef(null), i = t.useRef(null), m = t.useCallback(() => {
+    i.current && i.current.focus();
+  }, [i]);
   t.useImperativeHandle(c, () => ({
     element: i.current,
     focus: m,
@@ -25,12 +22,16 @@ const r = t.forwardRef((e, s) => {
   })), t.useImperativeHandle(s, () => c.current);
   const u = t.useCallback(
     (n) => {
-      e.id && l(e.onItemSelect, n, n.target, { id: e.id });
+      e.id && l(e.onItemSelect, n, n.target, {
+        id: e.id
+      });
     },
     [e.onItemSelect]
   ), o = t.useCallback(
     (n) => {
-      e.id && l(e.onKeyDown, n, n.target, { id: e.id });
+      e.id && l(e.onKeyDown, n, n.target, {
+        id: e.id
+      });
     },
     [e.onKeyDown]
   );
@@ -45,16 +46,13 @@ const r = t.forwardRef((e, s) => {
       style: e.style,
       dir: k(i, e.dir),
       tabIndex: f(e.tabIndex, e.disabled),
-      className: d(
-        e.className,
-        {
-          "k-breadcrumb-root-link": e.isFirst,
-          "k-breadcrumb-link": !e.isFirst,
-          "k-breadcrumb-icontext-link": (e.icon !== void 0 || e.iconClass !== void 0) && e.text,
-          "k-breadcrumb-icon-link": (e.icon !== void 0 || e.iconClass !== void 0) && !e.text,
-          "k-disabled": e.disabled
-        }
-      ),
+      className: d(e.className, {
+        "k-breadcrumb-root-link": e.isFirst,
+        "k-breadcrumb-link": !e.isFirst,
+        "k-breadcrumb-icontext-link": (e.icon !== void 0 || e.iconClass !== void 0) && e.text,
+        "k-breadcrumb-icon-link": (e.icon !== void 0 || e.iconClass !== void 0) && !e.text,
+        "k-disabled": e.disabled
+      }),
       onClick: (n) => {
         n.preventDefault(), u(n);
       },

package/breadcrumb/BreadcrumbListItem.mjs

@@ -10,36 +10,38 @@ import * as t from "react";
 import a from "prop-types";
 import { validatePackage as l, classNames as n } from "@progress/kendo-react-common";
 import { packageMetadata as u } from "../package-metadata.mjs";
-const c = t.forwardRef((e, m) => {
-  l(u);
-  const s = t.useRef(null), r = t.useRef(null), i = t.useCallback(
-    () => {
+const c = t.forwardRef(
+  (e, m) => {
+    l(u);
+    const s = t.useRef(null), r = t.useRef(null), i = t.useCallback(() => {
       r.current && r.current.focus();
-    },
-    [r]
-  );
-  return t.useImperativeHandle(s, () => ({
-    element: r.current,
-    focus: i,
-    props: e
-  })), t.useImperativeHandle(m, () => s.current), /* @__PURE__ */ t.createElement(
-    "li",
-    {
-      ref: r,
-      id: e.id,
-      style: e.style,
-      className: n(
-        "k-breadcrumb-item",
-        {
-          "k-breadcrumb-root-item": e.isFirstItem,
-          "k-breadcrumb-last-item": e.isLastItem
-        },
-        e.className
-      )
-    },
-    e.children
-  );
-}), d = {
+    }, [r]);
+    return t.useImperativeHandle(s, () => ({
+      element: r.current,
+      focus: i,
+      props: e
+    })), t.useImperativeHandle(
+      m,
+      () => s.current
+    ), /* @__PURE__ */ t.createElement(
+      "li",
+      {
+        ref: r,
+        id: e.id,
+        style: e.style,
+        className: n(
+          "k-breadcrumb-item",
+          {
+            "k-breadcrumb-root-item": e.isFirstItem,
+            "k-breadcrumb-last-item": e.isLastItem
+          },
+          e.className
+        )
+      },
+      e.children
+    );
+  }
+), d = {
   id: a.string,
   className: a.string,
   children: a.any,

package/breadcrumb/BreadcrumbOrderedList.mjs

@@ -10,48 +10,53 @@ import * as a from "react";
 import t from "prop-types";
 import { validatePackage as s, useDir as l, getTabIndex as i, classNames as n } from "@progress/kendo-react-common";
 import { packageMetadata as b } from "../package-metadata.mjs";
-const c = a.forwardRef((e, m) => {
-  s(b);
-  const r = a.useRef(null), d = a.useRef(null);
-  return a.useImperativeHandle(r, () => ({
-    element: d.current,
-    props: e
-  })), a.useImperativeHandle(m, () => r.current), /* @__PURE__ */ a.createElement(a.Fragment, null, e.rootItem ? /* @__PURE__ */ a.createElement(
-    "ol",
-    {
-      id: e.id,
-      ref: d,
-      style: e.style,
-      dir: l(d, e.dir),
-      tabIndex: i(e.tabIndex, e.disabled),
-      className: n(
-        "k-breadcrumb-root-item-container",
-        {
-          "k-disabled": e.disabled
-        },
-        e.className
-      )
-    },
-    e.children
-  ) : /* @__PURE__ */ a.createElement(
-    "ol",
-    {
-      id: e.id,
-      ref: d,
-      style: e.style,
-      dir: l(d, e.dir),
-      tabIndex: i(e.tabIndex, e.disabled),
-      className: n(
-        "k-breadcrumb-container !k-flex-wrap",
-        {
-          "k-disabled": e.disabled
-        },
-        e.className
-      )
-    },
-    e.children
-  ));
-}), u = {
+const c = a.forwardRef(
+  (e, m) => {
+    s(b);
+    const r = a.useRef(null), d = a.useRef(null);
+    return a.useImperativeHandle(r, () => ({
+      element: d.current,
+      props: e
+    })), a.useImperativeHandle(
+      m,
+      () => r.current
+    ), /* @__PURE__ */ a.createElement(a.Fragment, null, e.rootItem ? /* @__PURE__ */ a.createElement(
+      "ol",
+      {
+        id: e.id,
+        ref: d,
+        style: e.style,
+        dir: l(d, e.dir),
+        tabIndex: i(e.tabIndex, e.disabled),
+        className: n(
+          "k-breadcrumb-root-item-container",
+          {
+            "k-disabled": e.disabled
+          },
+          e.className
+        )
+      },
+      e.children
+    ) : /* @__PURE__ */ a.createElement(
+      "ol",
+      {
+        id: e.id,
+        ref: d,
+        style: e.style,
+        dir: l(d, e.dir),
+        tabIndex: i(e.tabIndex, e.disabled),
+        className: n(
+          "k-breadcrumb-container !k-flex-wrap",
+          {
+            "k-disabled": e.disabled
+          },
+          e.className
+        )
+      },
+      e.children
+    ));
+  }
+), u = {
   id: t.string,
   className: t.string,
   children: t.element,