@progress/kendo-react-buttons 14.5.0-develop.1 → 14.5.0-develop.11

package/toolbar/tools/ToolbarOverflowSection.mjs

@@ -5,69 +5,93 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { Popup as W } from "@progress/kendo-react-popup";
 import * as e from "react";
-import { ToolbarSeparator as S } from "./ToolbarSeparator.mjs";
-import { Button as M } from "../../Button.mjs";
-import { moreHorizontalIcon as I } from "@progress/kendo-svg-icons";
-import { useLocalization as O } from "@progress/kendo-react-intl";
-import { moreButtonTitle as d, messages as A } from "../messages/index.mjs";
-import { kendoThemeMaps as F } from "@progress/kendo-react-common";
-const U = (h) => {
-  var m;
-  const { toolbarRef: o, children: b, fillMode: R, size: g } = h, [u, k] = e.useState(!1), c = e.useRef(
-    e.Children.toArray(b).filter((t) => e.isValidElement(t)).map((t, r) => e.cloneElement(t, { key: t.key || r }))
-  ), l = e.useRef([]), a = e.useRef(0), T = e.useRef(null), w = e.useRef(null), v = O(), [N, E] = e.useReducer((t) => t + 1, 0), f = () => {
-    if (!o.current)
+import { Popup as V } from "@progress/kendo-react-popup";
+import { moreHorizontalIcon as _ } from "@progress/kendo-svg-icons";
+import { useLocalization as $ } from "@progress/kendo-react-intl";
+import { kendoThemeMaps as H } from "@progress/kendo-react-common";
+import { ToolbarSeparator as U } from "./ToolbarSeparator.mjs";
+import { moreButtonTitle as y, messages as j } from "../messages/index.mjs";
+import { Button as q } from "../../Button.mjs";
+const tt = (M) => {
+  var T;
+  const { toolbarRef: i, children: O, fillMode: S, size: F } = M, [g, L] = e.useState(!1), l = e.useRef(
+    e.Children.toArray(O).filter((t) => e.isValidElement(t)).map((t, r) => e.cloneElement(t, { key: t.key || r }))
+  ), o = e.useRef([]), h = e.useRef(0), W = e.useRef(null), R = e.useRef(null), N = $(), [D, p] = e.useReducer((t) => t + 1, 0), w = () => {
+    const t = i.current;
+    if (!t)
+      return null;
+    const r = t.clientWidth, n = parseInt(window.getComputedStyle(t).gap || "0", 10), c = Array.from(t.children), m = c.map((s) => Math.ceil(s.clientWidth)), a = m.reduce((s, b) => s + b, 0) + c.length * n + n * 2;
+    return { toolbarWidth: r, gap: n, childWidths: m, totalInnerWidth: a };
+  }, P = () => {
+    var k, E, C, z, I;
+    const t = w();
+    if (!t)
       return;
-    let t = 0;
-    const r = o.current.clientWidth, i = parseInt(window.getComputedStyle(o.current).gap || "0", 10), C = Array.from(o.current.children).reduce((n, s, P) => (n += Math.ceil(s.clientWidth), n), 0), p = Array.from(o.current.children).length, y = i * 2;
-    if (t = C + p * i + y, t > r) {
-      const n = [...c.current], s = n.pop();
-      a.current = r, c.current = n, s && (l.current = [s, ...l.current]);
-    } else if (r > a.current + i * p) {
-      const n = [...l.current], s = n.shift();
-      l.current = n, s && (c.current = [...c.current, s]), a.current = r;
+    const { toolbarWidth: r, gap: n, childWidths: c, totalInnerWidth: m } = t;
+    let a = m, s = !1;
+    const b = o.current.length > 0, d = [...l.current], v = [...o.current];
+    for (; a > r && d.length > 0; ) {
+      const u = d.pop(), f = d.length;
+      if (u && v.unshift(u), f < c.length && (a -= c[f] + n), !s && !b) {
+        const A = Math.ceil((E = (k = R.current) == null ? void 0 : k.offsetWidth) != null ? E : 0), B = Math.ceil((I = (z = (C = W.current) == null ? void 0 : C.element) == null ? void 0 : z.offsetWidth) != null ? I : 0);
+        a += A + B + n * 2;
+      }
+      s = !0;
+    }
+    if (s) {
+      l.current = d, o.current = v, h.current = r, p();
+      return;
+    }
+    if (o.current.length > 0 && r > h.current + n * c.length) {
+      const u = [...o.current], f = u.shift();
+      o.current = u, f && (l.current = [...l.current, f]), h.current = r, p();
     }
-    E();
   };
   e.useEffect(() => {
-    f();
-    const t = new ResizeObserver(f), r = o.current;
+    const t = new ResizeObserver(P), r = i.current;
     return r && t.observe(r), () => {
       r && t.unobserve(r);
     };
-  }, []);
-  const z = () => {
-    k(!u);
+  }, []), e.useLayoutEffect(() => {
+    if (!i.current || o.current.length === 0 || l.current.length === 0)
+      return;
+    const t = w();
+    if (!t || t.totalInnerWidth <= t.toolbarWidth)
+      return;
+    const r = [...l.current], n = r.pop();
+    h.current = t.toolbarWidth, l.current = r, n && (o.current = [n, ...o.current]), p();
+  });
+  const x = () => {
+    L(!g);
   };
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, c.current.length > 0 && c.current, l.current.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(S, { _ref: w, className: "k-toolbar-button-separator" }), /* @__PURE__ */ e.createElement(
-    M,
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, l.current.length > 0 && l.current, o.current.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(U, { _ref: R, className: "k-toolbar-button-separator" }), /* @__PURE__ */ e.createElement(
+    q,
     {
-      ref: T,
+      ref: W,
       className: "k-toolbar-overflow-button",
       fillMode: "flat",
-      svgIcon: I,
-      title: v.toLanguageString(d, A[d]),
-      onClick: z
+      svgIcon: _,
+      title: N.toLanguageString(y, j[y]),
+      onClick: x
     }
   ), /* @__PURE__ */ e.createElement(
-    W,
+    V,
     {
-      anchor: o.current,
-      show: u,
+      anchor: i.current,
+      show: g,
       popupClass: "k-toolbar-popup",
-      style: { width: (m = o.current) == null ? void 0 : m.offsetWidth }
+      style: { width: (T = i.current) == null ? void 0 : T.offsetWidth }
     },
     /* @__PURE__ */ e.createElement(
       "span",
       {
-        className: `k-toolbar-items-list k-toolbar-items-list-${F.sizeMap[g]} k-toolbar-items-list-${R}`
+        className: `k-toolbar-items-list k-toolbar-items-list-${H.sizeMap[F]} k-toolbar-items-list-${S}`
       },
-      l.current.length > 0 && l.current
+      o.current.length > 0 && o.current
     )
   )));
 };
 export {
-  U as ToolbarOverflowSection
+  tt as ToolbarOverflowSection
 };

package/toolbar/tools/ToolbarScrollButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),l=require("@progress/kendo-react-common"),m=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),s=require("@progress/kendo-svg-icons");function f(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const e=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,e.get?e:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const i=f(p),S=t=>{const n=m.useLocalization(),{disabled:o,type:e,scrollContentRef:c,buttonScrollSpeed:a,prevButton:u,nextButton:d}=t,b=v=>{c&&c.current&&a&&c.current.scrollBy({left:e==="next"?a:-a,behavior:"smooth"})},g=e==="prev"?u||"span":d||"span";return i.createElement(g,{className:l.classNames("k-button","k-icon-button",`k-toolbar-${e}`,{"k-disabled":o}),title:`${e==="prev"?n.toLanguageString(r.prevArrowTitle,r.messages[r.prevArrowTitle]):n.toLanguageString(r.nextArrowTitle,r.messages[r.nextArrowTitle])}`,"aria-hidden":!0,tabIndex:o?-1:void 0,onClick:b},i.createElement(l.SvgIcon,{icon:e==="prev"?s.caretAltLeftIcon:s.caretAltRightIcon,className:"k-button-icon"}))};exports.ToolbarScrollButton=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),l=require("@progress/kendo-react-common"),m=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),s=require("@progress/kendo-svg-icons");function f(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const e=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,e.get?e:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const i=f(p),v=t=>{const n=m.useLocalization(),{disabled:o,type:e,scrollContentRef:c,buttonScrollSpeed:a,prevButton:u,nextButton:d}=t,b=S=>{c&&c.current&&a&&c.current.scrollBy({left:e==="next"?a:-a,behavior:"smooth"})},g=e==="prev"?u||"span":d||"span";return i.createElement(g,{className:l.classNames("k-button","k-icon-button",`k-toolbar-${e}`,{"k-disabled":o}),title:`${e==="prev"?n.toLanguageString(r.prevArrowTitle,r.messages[r.prevArrowTitle]):n.toLanguageString(r.nextArrowTitle,r.messages[r.nextArrowTitle])}`,"aria-hidden":!0,tabIndex:o?-1:void 0,onClick:b},i.createElement(l.SvgIcon,{icon:e==="prev"?s.chevronLeftIcon:s.chevronRightIcon,className:"k-button-icon"}))};exports.ToolbarScrollButton=v;

package/toolbar/tools/ToolbarScrollButton.mjs

@@ -6,12 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as a from "react";
-import { classNames as d, SvgIcon as f } from "@progress/kendo-react-common";
-import { useLocalization as g } from "@progress/kendo-react-intl";
-import { prevArrowTitle as l, messages as c, nextArrowTitle as i } from "../messages/index.mjs";
-import { caretAltLeftIcon as v, caretAltRightIcon as S } from "@progress/kendo-svg-icons";
-const I = (s) => {
-  const n = g(), { disabled: r, type: t, scrollContentRef: o, buttonScrollSpeed: e, prevButton: m, nextButton: p } = s, u = (k) => {
+import { classNames as d, SvgIcon as v } from "@progress/kendo-react-common";
+import { useLocalization as f } from "@progress/kendo-react-intl";
+import { prevArrowTitle as c, messages as l, nextArrowTitle as i } from "../messages/index.mjs";
+import { chevronLeftIcon as g, chevronRightIcon as h } from "@progress/kendo-svg-icons";
+const L = (s) => {
+  const n = f(), { disabled: r, type: t, scrollContentRef: o, buttonScrollSpeed: e, prevButton: m, nextButton: p } = s, u = (S) => {
     o && o.current && e && o.current.scrollBy({
       left: t === "next" ? e : -e,
       behavior: "smooth"
@@ -26,15 +26,15 @@ const I = (s) => {
         className: d("k-button", "k-icon-button", `k-toolbar-${t}`, {
           "k-disabled": r
         }),
-        title: `${t === "prev" ? n.toLanguageString(l, c[l]) : n.toLanguageString(i, c[i])}`,
+        title: `${t === "prev" ? n.toLanguageString(c, l[c]) : n.toLanguageString(i, l[i])}`,
         "aria-hidden": !0,
         tabIndex: r ? -1 : void 0,
         onClick: u
       },
-      /* @__PURE__ */ a.createElement(f, { icon: t === "prev" ? v : S, className: "k-button-icon" })
+      /* @__PURE__ */ a.createElement(v, { icon: t === "prev" ? g : h, className: "k-button-icon" })
     )
   );
 };
 export {
-  I as ToolbarScrollButton
+  L as ToolbarScrollButton
 };