@progress/kendo-react-buttons 9.5.0 → 10.0.0-develop.2

package/toolbar/Toolbar.mjs

@@ -7,32 +7,30 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { validatePackage as Y, useDir as Z, classNames as _, kendoThemeMaps as ee, Keys as u } from "@progress/kendo-react-common";
-import { toolbarButtons as te } from "../util.mjs";
-import { packageMetadata as oe } from "../package-metadata.mjs";
-import { ToolbarScrollable as re } from "./tools/ToolbarScrollable.mjs";
-import { ToolbarOverflowSection as ne } from "./tools/ToolbarOverflowSection.mjs";
+import { useDir as Y, classNames as Z, kendoThemeMaps as _, Keys as u } from "@progress/kendo-react-common";
+import { toolbarButtons as ee } from "../util.mjs";
+import { ToolbarScrollable as te } from "./tools/ToolbarScrollable.mjs";
+import { ToolbarOverflowSection as oe } from "./tools/ToolbarOverflowSection.mjs";
 const N = t.forwardRef((i, A) => {
-  Y(oe);
   const {
     children: k,
     className: K,
     id: j,
     ariaLabel: q,
-    keyboardNavigation: p,
+    keyboardNavigation: w,
     role: x,
     onResize: E,
     style: D,
-    tabIndex: B = f.tabIndex,
-    size: b = f.size,
-    fillMode: w = f.fillMode,
+    tabIndex: B = a.tabIndex,
+    size: b = a.size,
+    fillMode: I = a.fillMode,
     overflow: c,
-    scrollButtons: d = f.scrollButtons,
-    scrollButtonsPosition: $ = f.scrollButtonsPosition,
-    buttonScrollSpeed: F = f.buttonScrollSpeed,
+    scrollButtons: d = a.scrollButtons,
+    scrollButtonsPosition: $ = a.scrollButtonsPosition,
+    buttonScrollSpeed: F = a.buttonScrollSpeed,
     prevButton: G,
     nextButton: J
-  } = i, C = t.useRef(!1), r = t.useRef(null), m = t.useRef(null), h = t.useRef(0), S = t.useRef(0), s = t.useRef([]), I = t.useRef({ element: null, props: i }), [Q, U] = t.useState(!1), [O, P] = t.useState(!0), [W, z] = t.useState(!1), g = Z(r, i.dir), y = t.useMemo(() => i.buttons || te, [i.buttons]), V = t.useMemo(() => y.map((e) => e + ":focus").join(","), [y]), M = () => {
+  } = i, C = t.useRef(!1), r = t.useRef(null), m = t.useRef(null), h = t.useRef(0), S = t.useRef(0), s = t.useRef([]), R = t.useRef({ element: null, props: i }), [Q, U] = t.useState(!1), [O, W] = t.useState(!0), [z, P] = t.useState(!1), y = Y(r, i.dir), g = t.useMemo(() => i.buttons || ee, [i.buttons]), V = t.useMemo(() => g.map((e) => e + ":focus").join(","), [g]), M = () => {
     const e = r.current && r.current.querySelector(V);
     return Math.max(
       0,
@@ -40,21 +38,21 @@ const N = t.forwardRef((i, A) => {
     );
   };
   t.useImperativeHandle(
-    I,
+    R,
     () => ({
       element: r.current,
       props: i
     })
-  ), t.useImperativeHandle(A, () => I.current), t.useEffect(() => (window.addEventListener("resize", L), r.current && (S.current = r.current.offsetWidth, h.current = r.current.offsetHeight, p !== !1 && (s.current = Array.from(
-    r.current.querySelectorAll(y.join(","))
+  ), t.useImperativeHandle(A, () => R.current), t.useEffect(() => (window.addEventListener("resize", L), r.current && (S.current = r.current.offsetWidth, h.current = r.current.offsetHeight, w !== !1 && (s.current = Array.from(
+    r.current.querySelectorAll(g.join(","))
   ), H(0))), () => {
     window.removeEventListener("resize", L), s.current.length = 0;
   }), []), t.useEffect(() => {
     if (C.current) {
-      if (!r.current || p === !1)
+      if (!r.current || w === !1)
         return;
       s.current = Array.from(
-        r.current.querySelectorAll(y.join(","))
+        r.current.querySelectorAll(g.join(","))
       ), H(M()), T();
     } else
       C.current = !0;
@@ -65,7 +63,7 @@ const N = t.forwardRef((i, A) => {
     });
   }, X = (e) => {
     const l = e.keyCode === u.left || e.keyCode === u.right || e.keyCode === u.home || e.keyCode === u.end, o = M();
-    !l || e.defaultPrevented || s.current.findIndex((a) => a === e.target) === -1 || (e.keyCode === u.left ? v(
+    !l || e.defaultPrevented || s.current.findIndex((f) => f === e.target) === -1 || (e.keyCode === u.left ? v(
       o,
       o === 0 ? s.current.length - 1 : o - 1
     ) : v(
@@ -76,8 +74,8 @@ const N = t.forwardRef((i, A) => {
     const o = s.current[l];
     if (o) {
       o.tabIndex = B, o.focus();
-      const a = s.current[e];
-      a && (a.tabIndex = -1);
+      const f = s.current[e];
+      f && (f.tabIndex = -1);
     }
   }, L = (e) => {
     if (!r.current)
@@ -85,8 +83,8 @@ const N = t.forwardRef((i, A) => {
     const l = r.current.offsetWidth, o = r.current.offsetHeight;
     if (S.current !== l || h.current !== o) {
       S.current = l, h.current = o;
-      const a = { offsetWidth: S.current, offsetHeight: h.current };
-      E && E.call(void 0, { target: I.current, ...a, nativeEvent: e });
+      const f = { offsetWidth: S.current, offsetHeight: h.current };
+      E && E.call(void 0, { target: R.current, ...f, nativeEvent: e });
     }
     T();
   }, T = t.useCallback(() => {
@@ -94,45 +92,45 @@ const N = t.forwardRef((i, A) => {
     e && U(
       e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight
     );
-  }, []), R = t.useCallback(() => {
+  }, []), p = t.useCallback(() => {
     const e = m.current;
     if (e) {
-      const l = e.scrollLeft === 0, o = g !== "rtl" ? e.scrollLeft + e.clientWidth === e.scrollWidth : e.clientWidth - e.scrollLeft === e.scrollWidth;
-      l && P(!0), o && z(!0), !l && !o && (P(!1), z(!1));
+      const l = e.scrollLeft === 0, o = y !== "rtl" ? e.scrollLeft + e.clientWidth === e.scrollWidth : e.clientWidth - e.scrollLeft === e.scrollWidth;
+      l && W(!0), o && P(!0), !l && !o && (W(!1), P(!1));
     }
-  }, [g]);
+  }, [y]);
   return t.useEffect(() => {
     const e = m.current;
     if (e)
-      return e.addEventListener("scroll", R), () => {
-        e.removeEventListener("scroll", R);
+      return e.addEventListener("scroll", p), () => {
+        e.removeEventListener("scroll", p);
       };
-  }, [R]), /* @__PURE__ */ t.createElement(
+  }, [p]), /* @__PURE__ */ t.createElement(
     "div",
     {
       id: j,
       "aria-label": q,
-      className: _(
+      className: Z(
         "k-toolbar",
         {
-          [`k-toolbar-${ee.sizeMap[b] || b}`]: b,
-          [`k-toolbar-${w}`]: w,
+          [`k-toolbar-${_.sizeMap[b] || b}`]: b,
+          [`k-toolbar-${I}`]: I,
           "k-toolbar-scrollable": c === "scroll",
           "k-toolbar-scrollable-overlay": c === "scroll" && (d === "hidden" || d === void 0),
           "k-toolbar-scrollable-start": c === "scroll" && d === "hidden" && O,
-          "k-toolbar-scrollable-end": c === "scroll" && d === "hidden" && W,
+          "k-toolbar-scrollable-end": c === "scroll" && d === "hidden" && z,
           "k-toolbar-section": i.overflow && c === "section"
         },
         K
       ),
       style: D,
       role: x !== void 0 ? x || void 0 : "toolbar",
-      dir: g,
+      dir: y,
       ref: r,
-      onKeyDown: p !== !1 ? X : void 0
+      onKeyDown: w !== !1 ? X : void 0
     },
     c === "scroll" && /* @__PURE__ */ t.createElement(
-      re,
+      te,
       {
         scrollButtons: d,
         scrollButtonsPosition: $,
@@ -141,16 +139,16 @@ const N = t.forwardRef((i, A) => {
         isOverflowing: Q,
         scrollContentRef: m,
         buttonScrollSpeed: F,
-        dir: g,
+        dir: y,
         isScrollStartPosition: O,
-        isScrollEndPosition: W,
+        isScrollEndPosition: z,
         children: k
       }
     ),
-    c === "section" && /* @__PURE__ */ t.createElement(ne, { toolbarRef: r, fillMode: w, size: b }, k),
+    c === "section" && /* @__PURE__ */ t.createElement(oe, { toolbarRef: r, fillMode: I, size: b }, k),
     (c === "none" || c === void 0) && k
   );
-}), f = {
+}), a = {
   tabIndex: 0,
   size: "medium",
   fillMode: "solid",