@progress/kendo-react-layout 14.5.0-develop.12 → 14.5.0-develop.14

package/tabstrip/TabStrip.mjs

@@ -6,11 +6,11 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as n from "react";
-import r from "prop-types";
-import { TabStripNavigation as Y } from "./TabStripNavigation.mjs";
+import l from "prop-types";
+import { TabStripNavigation as ee } from "./TabStripNavigation.mjs";
 import { TabStripContent as ie } from "./TabStripContent.mjs";
-import { Navigation as ce, classNames as ae, kendoThemeMaps as ue } from "@progress/kendo-react-common";
-const de = {
+import { useWebMcpRegister as ce, Navigation as ae, classNames as ue, kendoThemeMaps as de } from "@progress/kendo-react-common";
+const be = {
   animation: !0,
   tabPosition: "top",
   tabAlignment: "start",
@@ -20,101 +20,101 @@ const de = {
   scrollButtons: "auto",
   scrollButtonsPosition: "split",
   renderAllContent: !1
-}, E = n.forwardRef((Z, _) => {
-  const R = { ...de, ...Z }, {
+}, D = n.forwardRef((E, te) => {
+  const h = n.useMemo(() => ({ ...be, ...E }), [E]), {
     id: m,
     animation: H,
-    children: M,
+    children: O,
     selected: u,
-    onSelect: A,
-    style: ee,
-    tabContentStyle: O,
-    tabPosition: p,
-    tabAlignment: z,
+    onSelect: N,
+    style: ne,
+    tabContentStyle: z,
+    tabPosition: b,
+    tabAlignment: W,
     tabIndex: L,
-    className: W,
-    dir: v,
+    className: K,
+    dir: x,
     renderAllContent: P,
-    keepTabsMounted: K,
-    size: h,
+    keepTabsMounted: j,
+    size: k,
     scrollable: g,
-    scrollButtons: x,
-    scrollButtonsPosition: j,
-    buttonScrollSpeed: F,
-    mouseScrollSpeed: te,
-    prevButton: U,
-    nextButton: $
-  } = R, [f, ne] = n.useState(null), oe = n.useRef({ props: R }), C = n.useRef(null), D = n.useRef(null), T = n.useRef(void 0), I = n.useRef(void 0), q = n.useCallback(() => ({ props: R }), [R]);
-  n.useImperativeHandle(oe, q), n.useImperativeHandle(_, q);
-  const y = n.useMemo(() => m ? m + "-content-panel-id" : void 0, [m]), w = n.useMemo(() => m ? m + "-nav-item-id" : void 0, [m]), S = n.useMemo(() => n.Children.toArray(M).filter(Boolean), [M]), G = n.useCallback(() => /top|bottom/.test(p || "top"), [p]), k = n.useCallback(() => {
-    const s = G(), i = D.current;
+    scrollButtons: C,
+    scrollButtonsPosition: F,
+    buttonScrollSpeed: U,
+    mouseScrollSpeed: $,
+    prevButton: q,
+    nextButton: G
+  } = h, [f, oe] = n.useState(null), J = n.useRef({ props: h }), T = n.useRef(null), A = n.useRef(null), I = n.useRef(void 0), R = n.useRef(void 0), Q = n.useCallback(() => ({ props: h }), [h]);
+  n.useImperativeHandle(J, Q), n.useImperativeHandle(te, Q), ce("tabstrip", J, h, h.webMcp);
+  const w = n.useMemo(() => m ? m + "-content-panel-id" : void 0, [m]), y = n.useMemo(() => m ? m + "-nav-item-id" : void 0, [m]), S = n.useMemo(() => n.Children.toArray(O).filter(Boolean), [O]), V = n.useCallback(() => /top|bottom/.test(b || "top"), [b]), v = n.useCallback(() => {
+    const s = V(), i = A.current;
     if (!i)
       return;
-    const a = i.scrollLeft, t = i.clientWidth, e = i.scrollWidth, l = i.scrollTop, o = i.scrollHeight, d = i.clientHeight;
+    const a = i.scrollLeft, t = i.clientWidth, e = i.scrollWidth, r = i.scrollTop, o = i.scrollHeight, d = i.clientHeight;
     let c = null;
-    const re = s ? e > t : o > d, X = v === "rtl";
-    re ? s ? a + t === e || (X && t - a) === e ? c = "end" : a === 0 || X && -a === 0 ? c = "start" : a > 0 && a + t < e || -a > 0 && t - a < e ? c = "middle" : c = null : o - (l + d) === 0 ? c = "bottom" : l === 0 ? c = "top" : l > 0 && o - (l + d) > 0 ? c = "middle" : c = null : c = null, ne(c);
-  }, [G, v]), B = n.useCallback(
+    const le = s ? e > t : o > d, _ = x === "rtl";
+    le ? s ? a + t === e || (_ && t - a) === e ? c = "end" : a === 0 || _ && -a === 0 ? c = "start" : a > 0 && a + t < e || -a > 0 && t - a < e ? c = "middle" : c = null : o - (r + d) === 0 ? c = "bottom" : r === 0 ? c = "top" : r > 0 && o - (r + d) > 0 ? c = "middle" : c = null : c = null, oe(c);
+  }, [V, x]), M = n.useCallback(
     (s) => {
-      u !== s && A && A({
+      u !== s && N && N({
         selected: s
       });
     },
-    [u, A]
-  ), b = n.useCallback(
+    [u, N]
+  ), p = n.useCallback(
     (s) => {
       var t, e;
       const i = S;
-      ((e = (t = i == null ? void 0 : i[s]) == null ? void 0 : t.props) == null ? void 0 : e.disabled) || B(s);
+      ((e = (t = i == null ? void 0 : i[s]) == null ? void 0 : t.props) == null ? void 0 : e.disabled) || M(s);
     },
-    [S, B]
-  ), J = n.useCallback((s) => {
-    I.current && I.current.triggerKeyboardEvent(s);
+    [S, M]
+  ), X = n.useCallback((s) => {
+    R.current && R.current.triggerKeyboardEvent(s);
   }, []);
   n.useEffect(() => {
     var a;
-    const s = C.current, i = s && getComputedStyle(s).direction === "rtl" || !1;
-    return s && (I.current = new ce({
+    const s = T.current, i = s && getComputedStyle(s).direction === "rtl" || !1;
+    return s && (R.current = new ae({
       tabIndex: 0,
-      root: C,
+      root: T,
       rovingTabIndex: !0,
       focusClass: "k-focus",
       selectors: [".k-tabstrip .k-tabstrip-item"],
       keyboardEvents: {
         keydown: {
-          ArrowLeft: (t, e, l) => {
-            l.preventDefault();
+          ArrowLeft: (t, e, r) => {
+            r.preventDefault();
             const o = e.elements.indexOf(t), d = o !== 0 ? o - 1 : e.elements.length - 1, c = o !== e.elements.length - 1 ? o + 1 : 0;
-            i ? (e.focusNext(t), b(c)) : (e.focusPrevious(t), b(d));
+            i ? (e.focusNext(t), p(c)) : (e.focusPrevious(t), p(d));
           },
-          ArrowRight: (t, e, l) => {
-            l.preventDefault();
+          ArrowRight: (t, e, r) => {
+            r.preventDefault();
             const o = e.elements.indexOf(t), d = o !== 0 ? o - 1 : e.elements.length - 1, c = o !== e.elements.length - 1 ? o + 1 : 0;
-            i ? (e.focusPrevious(t), b(d)) : (e.focusNext(t), b(c));
+            i ? (e.focusPrevious(t), p(d)) : (e.focusNext(t), p(c));
           },
-          ArrowDown: (t, e, l) => {
-            l.preventDefault();
+          ArrowDown: (t, e, r) => {
+            r.preventDefault();
             const o = e.elements.indexOf(t), d = o !== e.elements.length - 1 ? o + 1 : 0;
-            e.focusNext(t), b(d);
+            e.focusNext(t), p(d);
           },
-          ArrowUp: (t, e, l) => {
-            l.preventDefault();
+          ArrowUp: (t, e, r) => {
+            r.preventDefault();
             const o = e.elements.indexOf(t), d = o !== 0 ? o - 1 : e.elements.length - 1;
-            e.focusPrevious(t), b(d);
+            e.focusPrevious(t), p(d);
           },
-          Home: (t, e, l) => {
-            l.preventDefault(), e.focusElement(e.first, t), b(0);
+          Home: (t, e, r) => {
+            r.preventDefault(), e.focusElement(e.first, t), p(0);
           },
-          End: (t, e, l) => {
-            l.preventDefault(), e.focusElement(e.last, t), b(e.elements.length - 1);
+          End: (t, e, r) => {
+            r.preventDefault(), e.focusElement(e.last, t), p(e.elements.length - 1);
           }
         }
       }
-    }), (a = I.current) == null || a.initializeRovingTab(u), k(), T.current = window.ResizeObserver && new ResizeObserver(() => k()), C.current && T.current && T.current.observe(C.current)), () => {
+    }), (a = R.current) == null || a.initializeRovingTab(u), v(), I.current = window.ResizeObserver && new ResizeObserver(() => v()), T.current && I.current && I.current.observe(T.current)), () => {
       var t;
-      (t = I.current) == null || t.removeFocusListener(), T.current && T.current.disconnect();
+      (t = R.current) == null || t.removeFocusListener(), I.current && I.current.disconnect();
     };
-  }, [u, b, k]);
+  }, [u, p, v]);
   const se = n.useMemo(() => {
     const s = n.Children.count(S);
     return u < s && u > -1 ? /* @__PURE__ */ n.createElement(
@@ -122,103 +122,104 @@ const de = {
       {
         index: u,
         selected: u,
-        contentPanelId: y,
-        navItemId: w,
+        contentPanelId: w,
+        navItemId: y,
         animation: H,
-        keepTabsMounted: K,
+        keepTabsMounted: j,
         renderAllContent: P,
-        style: O
+        style: z
       },
       S
     ) : null;
-  }, [u, S, y, w, H, K, P, O]), N = x === "hidden" || f === null && x === "auto" ? "hidden" : "visible", Q = n.useMemo(
+  }, [u, S, w, y, H, j, P, z]), B = C === "hidden" || f === null && C === "auto" ? "hidden" : "visible", Y = n.useMemo(
     () => ({
-      itemsNavRef: D,
+      itemsNavRef: A,
       children: S,
       selected: u,
       tabIndex: L,
-      tabPosition: p,
-      tabAlignment: z,
-      size: h,
+      tabPosition: b,
+      tabAlignment: W,
+      size: k,
       scrollable: g,
-      scrollButtons: N,
-      scrollButtonsPosition: j,
-      buttonScrollSpeed: F,
-      mouseScrollSpeed: te,
-      prevButton: U,
-      nextButton: $,
-      dir: v,
-      contentPanelId: y,
+      scrollButtons: B,
+      scrollButtonsPosition: F,
+      buttonScrollSpeed: U,
+      mouseScrollSpeed: $,
+      prevButton: q,
+      nextButton: G,
+      dir: x,
+      contentPanelId: w,
       renderAllContent: P,
-      navItemId: w,
-      onKeyDown: J,
-      onSelect: B,
-      onScroll: k,
+      navItemId: y,
+      onKeyDown: X,
+      onSelect: M,
+      onScroll: v,
       containerScrollPosition: f
     }),
     [
-      D,
+      A,
       S,
       u,
       L,
-      p,
-      z,
-      h,
+      b,
+      W,
+      k,
       g,
-      N,
-      j,
+      B,
       F,
       U,
       $,
-      v,
-      y,
-      P,
+      q,
+      G,
+      x,
       w,
-      J,
-      B,
-      k,
+      P,
+      y,
+      X,
+      M,
+      v,
       f
     ]
-  ), V = p === "bottom", le = n.useMemo(
-    () => ae(
+  ), Z = b === "bottom", re = n.useMemo(
+    () => ue(
       "k-tabstrip k-pos-relative",
       {
-        [`k-tabstrip-${ue.sizeMap[h || "medium"] || h}`]: h,
-        "k-tabstrip-left": p === "left",
-        "k-tabstrip-right": p === "right",
-        "k-tabstrip-bottom": p === "bottom",
-        "k-tabstrip-top": p === "top",
+        [`k-tabstrip-${de.sizeMap[k || "medium"] || k}`]: k,
+        "k-tabstrip-left": b === "left",
+        "k-tabstrip-right": b === "right",
+        "k-tabstrip-bottom": b === "bottom",
+        "k-tabstrip-top": b === "top",
         "k-tabstrip-scrollable": g,
-        "k-tabstrip-scrollable-start k-tabstrip-scrollable-end": g && N === "visible",
-        "k-tabstrip-scrollable-start": g && x === "auto" && (f === "end" || f === "middle"),
-        "k-tabstrip-scrollable-end": g && x === "auto" && (f === "start" || f === "middle")
+        "k-tabstrip-scrollable-start k-tabstrip-scrollable-end": g && B === "visible",
+        "k-tabstrip-scrollable-start": g && C === "auto" && (f === "end" || f === "middle"),
+        "k-tabstrip-scrollable-end": g && C === "auto" && (f === "start" || f === "middle")
       },
-      W
+      K
     ),
-    [h, p, g, x, N, f, W]
+    [k, b, g, C, B, f, K]
   );
-  return /* @__PURE__ */ n.createElement("div", { id: m, ref: C, dir: v, className: le, style: ee, onScroll: k }, !V && /* @__PURE__ */ n.createElement(Y, { ...Q }), se, V && /* @__PURE__ */ n.createElement(Y, { ...Q }));
+  return /* @__PURE__ */ n.createElement("div", { id: m, ref: T, dir: x, className: re, style: ne, onScroll: v }, !Z && /* @__PURE__ */ n.createElement(ee, { ...Y }), se, Z && /* @__PURE__ */ n.createElement(ee, { ...Y }));
 });
-E.displayName = "TabStrip";
-E.propTypes = {
-  id: r.string,
-  animation: r.bool,
-  children: r.node,
-  onSelect: r.func,
-  selected: r.number,
-  style: r.object,
-  tabContentStyle: r.object,
-  tabPosition: r.string,
-  tabAlignment: r.string,
-  tabIndex: r.number,
-  className: r.string,
-  dir: r.string,
-  renderAllContent: r.bool,
-  size: r.oneOf(["small", "medium", "large"]),
-  scrollButtons: r.oneOf(["auto", "visible", "hidden"]),
-  scrollButtonsPosition: r.oneOf(["split", "start", "end", "around", "before", "after"])
+D.displayName = "TabStrip";
+D.propTypes = {
+  id: l.string,
+  animation: l.bool,
+  children: l.node,
+  onSelect: l.func,
+  selected: l.number,
+  style: l.object,
+  tabContentStyle: l.object,
+  tabPosition: l.string,
+  tabAlignment: l.string,
+  tabIndex: l.number,
+  className: l.string,
+  dir: l.string,
+  renderAllContent: l.bool,
+  size: l.oneOf(["small", "medium", "large"]),
+  scrollButtons: l.oneOf(["auto", "visible", "hidden"]),
+  scrollButtonsPosition: l.oneOf(["split", "start", "end", "around", "before", "after"])
 };
-const ge = E;
+const Se = D;
 export {
-  ge as TabStrip
+  Se as TabStrip
 };