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

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-buttons",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1729236152,
+  publishDate: 1731056544,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-buttons",
-  "version": "9.0.0-develop.2",
+  "version": "9.0.0-develop.20",
   "description": "All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,8 +23,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "9.0.0-develop.2",
-    "@progress/kendo-react-popup": "9.0.0-develop.2",
+    "@progress/kendo-react-common": "9.0.0-develop.20",
+    "@progress/kendo-react-popup": "9.0.0-develop.20",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/toolbar/Toolbar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),i=require("prop-types"),n=require("@progress/kendo-react-common"),u=require("../util.js"),p=require("../package-metadata.js");function b(h){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>h[t]})}}return e.default=h,Object.freeze(e)}const l=b(c),a=class a extends l.Component{constructor(e){super(e),this._element=null,this.offsetHeight=0,this.offsetWidth=0,this.buttons=[],this.focusedSelector=this.selectors.map(t=>t+":focus").join(","),this.setTabIndex=t=>{const{tabIndex:o=a.defaultProps.tabIndex}=this.props;this.buttons.forEach((r,s)=>{r.tabIndex=s===t?o:-1})},this.onKeyDown=t=>{const o=t.target;if(!(t.keyCode===n.Keys.left||t.keyCode===n.Keys.right||t.keyCode===n.Keys.home||t.keyCode===n.Keys.end)||t.defaultPrevented||this.buttons.findIndex(d=>d===o)===-1)return;const s=this.focusedIndex;t.keyCode===n.Keys.left?this.focusButton(s,s===0?this.buttons.length-1:s-1):this.focusButton(s,s===this.buttons.length-1?0:s+1),t.keyCode===n.Keys.home&&this.focusButton(s,0),t.keyCode===n.Keys.end&&this.focusButton(s,this.buttons.length-1)},this.onWindowResize=t=>{const o=this.element;if(!o)return;const r=o.offsetWidth,s=o.offsetHeight;if(this.offsetWidth!==r||this.offsetHeight!==s){this.offsetWidth=r,this.offsetHeight=s;const d={offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight};this.props.onResize&&this.props.onResize.call(void 0,{target:this,...d,nativeEvent:t})}},n.validatePackage(p.packageMetadata)}get selectors(){return this.props.buttons||u.toolbarButtons}get focusedIndex(){const e=this.element&&this.element.querySelector(this.focusedSelector);return Math.max(0,this.buttons.findIndex(t=>t===e))}get element(){return this._element}componentDidMount(){window.addEventListener("resize",this.onWindowResize);const e=this.element;e&&(this.offsetWidth=e.offsetWidth,this.offsetHeight=e.offsetHeight,this.props.keyboardNavigation!==!1&&(this.buttons=Array.from(e.querySelectorAll(this.selectors.join(","))),this.setTabIndex(0)))}componentDidUpdate(){const e=this.element;!e||this.props.keyboardNavigation===!1||(this.buttons=Array.from(e.querySelectorAll(this.selectors.join(","))),this.setTabIndex(this.focusedIndex))}componentWillUnmount(){window.removeEventListener("resize",this.onWindowResize),this.buttons.length=0}render(){return l.createElement("div",{id:this.props.id,"aria-label":this.props.ariaLabel,className:n.classNames("k-toolbar k-toolbar-solid",{[`k-toolbar-${n.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size},this.props.className),style:this.props.style,role:this.props.role!==void 0?this.props.role||void 0:"toolbar",dir:this.props.dir,ref:e=>this._element=e,onKeyDown:this.props.keyboardNavigation!==!1?this.onKeyDown:void 0},this.props.children)}focusButton(e,t){const{tabIndex:o=a.defaultProps.tabIndex}=this.props,r=this.buttons[t];if(r){r.tabIndex=o,r.focus();const s=this.buttons[e];s&&(s.tabIndex=-1)}}};a.propTypes={tabIndex:i.number,dir:i.string,keyboardNavigation:i.bool,style:i.object,className:i.string,role:i.string,onResize:i.func,buttons:i.arrayOf(i.string),size:i.oneOf([null,"small","medium","large"])},a.defaultProps={tabIndex:0,size:"medium"};let f=a;exports.Toolbar=f;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),H=require("../util.js"),P=require("../package-metadata.js");function W(o){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const i in o)if(i!=="default"){const d=Object.getOwnPropertyDescriptor(o,i);Object.defineProperty(l,i,d.get?d:{enumerable:!0,get:()=>o[i]})}}return l.default=o,Object.freeze(l)}const r=W(E),p=r.forwardRef((o,l)=>{a.validatePackage(P.packageMetadata);const{children:i,className:d,id:j,ariaLabel:q,keyboardNavigation:h,role:I,onResize:x,dir:S,style:T,tabIndex:z=O.tabIndex,size:k=O.size}=o,v=r.useRef(!1),n=r.useRef(null),b=r.useRef(0),y=r.useRef(0),s=r.useRef([]),m=r.useMemo(()=>o.buttons||H.toolbarButtons,[o.buttons]),C=r.useMemo(()=>m.map(e=>e+":focus").join(","),[m]),w=()=>{const e=n.current&&n.current.querySelector(C);return Math.max(0,s.current.findIndex(c=>c===e))},R=r.useRef({element:null,props:o});r.useImperativeHandle(R,()=>({element:n.current,props:o})),r.useImperativeHandle(l,()=>R.current),r.useEffect(()=>(window.addEventListener("resize",M),n.current&&(y.current=n.current.offsetWidth,b.current=n.current.offsetHeight,h!==!1&&(s.current=Array.from(n.current.querySelectorAll(m.join(","))),K(0))),()=>{window.removeEventListener("resize",M),s.current.length=0}),[]),r.useEffect(()=>{if(v.current){if(!n.current||h===!1)return;s.current=Array.from(n.current.querySelectorAll(m.join(","))),K(w())}else v.current=!0});const K=e=>{s.current.forEach((c,t)=>{c.tabIndex=t===e?z:-1})},N=e=>{const c=e.keyCode===a.Keys.left||e.keyCode===a.Keys.right||e.keyCode===a.Keys.home||e.keyCode===a.Keys.end,t=w();!c||e.defaultPrevented||s.current.findIndex(f=>f===e.target)===-1||(e.keyCode===a.Keys.left?g(t,t===0?s.current.length-1:t-1):g(t,t===s.current.length-1?0:t+1),e.keyCode===a.Keys.home&&g(t,0),e.keyCode===a.Keys.end&&g(t,s.current.length-1))},g=(e,c)=>{const t=s.current[c];if(t){t.tabIndex=z,t.focus();const f=s.current[e];f&&(f.tabIndex=-1)}},M=e=>{if(!n.current)return;const c=n.current.offsetWidth,t=n.current.offsetHeight;if(y.current!==c||b.current!==t){y.current=c,b.current=t;const f={offsetWidth:y.current,offsetHeight:b.current};x&&x.call(void 0,{target:R.current,...f,nativeEvent:e})}};return r.createElement("div",{id:j,"aria-label":q,className:a.classNames("k-toolbar k-toolbar-solid",{[`k-toolbar-${a.kendoThemeMaps.sizeMap[k]||k}`]:k},d),style:T,role:I!==void 0?I||void 0:"toolbar",dir:S,ref:n,onKeyDown:h!==!1?N:void 0},i)}),O={tabIndex:0,size:"medium"};p.displayName="KendoReactToolbar";p.propTypes={tabIndex:u.number,dir:u.string,keyboardNavigation:u.bool,style:u.object,className:u.string,role:u.string,onResize:u.func,buttons:u.arrayOf(u.string.isRequired),size:u.oneOf([null,"small","medium","large"])};exports.Toolbar=p;

package/toolbar/Toolbar.mjs

@@ -6,122 +6,112 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
-import o from "prop-types";
-import { Keys as r, validatePackage as l, classNames as p, kendoThemeMaps as u } from "@progress/kendo-react-common";
-import { toolbarButtons as c } from "../util.mjs";
-import { packageMetadata as m } from "../package-metadata.mjs";
-const h = class h extends a.Component {
-  constructor(s) {
-    super(s), this._element = null, this.offsetHeight = 0, this.offsetWidth = 0, this.buttons = [], this.focusedSelector = this.selectors.map((t) => t + ":focus").join(","), this.setTabIndex = (t) => {
-      const { tabIndex: i = h.defaultProps.tabIndex } = this.props;
-      this.buttons.forEach((n, e) => {
-        n.tabIndex = e === t ? i : -1;
-      });
-    }, this.onKeyDown = (t) => {
-      const i = t.target;
-      if (!(t.keyCode === r.left || t.keyCode === r.right || t.keyCode === r.home || t.keyCode === r.end) || t.defaultPrevented || this.buttons.findIndex((f) => f === i) === -1)
-        return;
-      const e = this.focusedIndex;
-      t.keyCode === r.left ? this.focusButton(e, e === 0 ? this.buttons.length - 1 : e - 1) : this.focusButton(e, e === this.buttons.length - 1 ? 0 : e + 1), t.keyCode === r.home && this.focusButton(e, 0), t.keyCode === r.end && this.focusButton(e, this.buttons.length - 1);
-    }, this.onWindowResize = (t) => {
-      const i = this.element;
-      if (!i)
-        return;
-      const n = i.offsetWidth, e = i.offsetHeight;
-      if (this.offsetWidth !== n || this.offsetHeight !== e) {
-        this.offsetWidth = n, this.offsetHeight = e;
-        const f = { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight };
-        this.props.onResize && this.props.onResize.call(void 0, { target: this, ...f, nativeEvent: t });
-      }
-    }, l(m);
-  }
-  get selectors() {
-    return this.props.buttons || c;
-  }
-  get focusedIndex() {
-    const s = this.element && this.element.querySelector(this.focusedSelector);
+import * as r from "react";
+import c from "prop-types";
+import { validatePackage as j, classNames as q, kendoThemeMaps as A, Keys as u } from "@progress/kendo-react-common";
+import { toolbarButtons as B } from "../util.mjs";
+import { packageMetadata as O } from "../package-metadata.mjs";
+const v = r.forwardRef((i, C) => {
+  j(O);
+  const {
+    children: E,
+    className: H,
+    id: M,
+    ariaLabel: N,
+    keyboardNavigation: b,
+    role: h,
+    onResize: k,
+    dir: T,
+    style: W,
+    tabIndex: x = w.tabIndex,
+    size: y = w.size
+  } = i, I = r.useRef(!1), n = r.useRef(null), f = r.useRef(0), l = r.useRef(0), o = r.useRef([]), d = r.useMemo(() => i.buttons || B, [i.buttons]), K = r.useMemo(() => d.map((e) => e + ":focus").join(","), [d]), R = () => {
+    const e = n.current && n.current.querySelector(K);
     return Math.max(
       0,
-      this.buttons.findIndex((t) => t === s)
+      o.current.findIndex((s) => s === e)
     );
-  }
-  /**
-   * Returns the HTML element of the Toolbar component.
-   */
-  get element() {
-    return this._element;
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    window.addEventListener("resize", this.onWindowResize);
-    const s = this.element;
-    s && (this.offsetWidth = s.offsetWidth, this.offsetHeight = s.offsetHeight, this.props.keyboardNavigation !== !1 && (this.buttons = Array.from(s.querySelectorAll(this.selectors.join(","))), this.setTabIndex(0)));
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate() {
-    const s = this.element;
-    !s || this.props.keyboardNavigation === !1 || (this.buttons = Array.from(s.querySelectorAll(this.selectors.join(","))), this.setTabIndex(this.focusedIndex));
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.onWindowResize), this.buttons.length = 0;
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    return /* @__PURE__ */ a.createElement(
-      "div",
-      {
-        id: this.props.id,
-        "aria-label": this.props.ariaLabel,
-        className: p(
-          "k-toolbar k-toolbar-solid",
-          {
-            [`k-toolbar-${u.sizeMap[this.props.size] || this.props.size}`]: this.props.size
-          },
-          this.props.className
-        ),
-        style: this.props.style,
-        role: this.props.role !== void 0 ? this.props.role || void 0 : "toolbar",
-        dir: this.props.dir,
-        ref: (s) => this._element = s,
-        onKeyDown: this.props.keyboardNavigation !== !1 ? this.onKeyDown : void 0
-      },
-      this.props.children
-    );
-  }
-  focusButton(s, t) {
-    const { tabIndex: i = h.defaultProps.tabIndex } = this.props, n = this.buttons[t];
-    if (n) {
-      n.tabIndex = i, n.focus();
-      const e = this.buttons[s];
-      e && (e.tabIndex = -1);
+  }, g = r.useRef({ element: null, props: i });
+  r.useImperativeHandle(
+    g,
+    () => ({
+      element: n.current,
+      props: i
+    })
+  ), r.useImperativeHandle(C, () => g.current), r.useEffect(() => (window.addEventListener("resize", z), n.current && (l.current = n.current.offsetWidth, f.current = n.current.offsetHeight, b !== !1 && (o.current = Array.from(
+    n.current.querySelectorAll(d.join(","))
+  ), p(0))), () => {
+    window.removeEventListener("resize", z), o.current.length = 0;
+  }), []), r.useEffect(() => {
+    if (I.current) {
+      if (!n.current || b === !1)
+        return;
+      o.current = Array.from(
+        n.current.querySelectorAll(d.join(","))
+      ), p(R());
+    } else
+      I.current = !0;
+  });
+  const p = (e) => {
+    o.current.forEach((s, t) => {
+      s.tabIndex = t === e ? x : -1;
+    });
+  }, S = (e) => {
+    const s = e.keyCode === u.left || e.keyCode === u.right || e.keyCode === u.home || e.keyCode === u.end, t = R();
+    !s || e.defaultPrevented || o.current.findIndex((a) => a === e.target) === -1 || (e.keyCode === u.left ? m(t, t === 0 ? o.current.length - 1 : t - 1) : m(t, t === o.current.length - 1 ? 0 : t + 1), e.keyCode === u.home && m(t, 0), e.keyCode === u.end && m(t, o.current.length - 1));
+  }, m = (e, s) => {
+    const t = o.current[s];
+    if (t) {
+      t.tabIndex = x, t.focus();
+      const a = o.current[e];
+      a && (a.tabIndex = -1);
     }
-  }
-};
-h.propTypes = {
-  tabIndex: o.number,
-  dir: o.string,
-  keyboardNavigation: o.bool,
-  style: o.object,
-  className: o.string,
-  role: o.string,
-  onResize: o.func,
-  buttons: o.arrayOf(o.string),
-  size: o.oneOf([null, "small", "medium", "large"])
-}, h.defaultProps = {
+  }, z = (e) => {
+    if (!n.current)
+      return;
+    const s = n.current.offsetWidth, t = n.current.offsetHeight;
+    if (l.current !== s || f.current !== t) {
+      l.current = s, f.current = t;
+      const a = { offsetWidth: l.current, offsetHeight: f.current };
+      k && k.call(void 0, { target: g.current, ...a, nativeEvent: e });
+    }
+  };
+  return /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      id: M,
+      "aria-label": N,
+      className: q(
+        "k-toolbar k-toolbar-solid",
+        {
+          [`k-toolbar-${A.sizeMap[y] || y}`]: y
+        },
+        H
+      ),
+      style: W,
+      role: h !== void 0 ? h || void 0 : "toolbar",
+      dir: T,
+      ref: n,
+      onKeyDown: b !== !1 ? S : void 0
+    },
+    E
+  );
+}), w = {
   tabIndex: 0,
   size: "medium"
 };
-let d = h;
+v.displayName = "KendoReactToolbar";
+v.propTypes = {
+  tabIndex: c.number,
+  dir: c.string,
+  keyboardNavigation: c.bool,
+  style: c.object,
+  className: c.string,
+  role: c.string,
+  onResize: c.func,
+  buttons: c.arrayOf(c.string.isRequired),
+  size: c.oneOf([null, "small", "medium", "large"])
+};
 export {
-  d as Toolbar
+  v as Toolbar
 };

package/toolbar/tools/ToolbarItem.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common");function u(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const c=u(i),n=class n extends c.PureComponent{constructor(){super(...arguments),this._element=null}get element(){return this._element}render(){return c.createElement("div",{id:this.props.id,className:l.classNames("k-toolbar-item",this.props.className),style:this.props.style,ref:t=>this._element=t},this.props.children)}};n.propTypes={className:a.string};let s=n;exports.ToolbarItem=s;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),u=require("prop-types"),m=require("@progress/kendo-react-common");function d(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const n=d(i),a=n.forwardRef((e,r)=>{const{id:t,className:o,style:s,children:l}=e,c=n.useRef(null);return n.useImperativeHandle(r,()=>({element:c.current})),n.createElement("div",{id:t,className:m.classNames("k-toolbar-item",o),style:s,ref:c},l)});a.displayName="KendoReactToolbarItem";a.propTypes={className:u.string};exports.ToolbarItem=a;

package/toolbar/tools/ToolbarItem.mjs

@@ -6,39 +6,22 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as s from "react";
-import i from "prop-types";
-import { classNames as p } from "@progress/kendo-react-common";
-const e = class e extends s.PureComponent {
-  constructor() {
-    super(...arguments), this._element = null;
-  }
-  /**
-   * Returns the HTML element of the ToolbarItem component.
-   */
-  get element() {
-    return this._element;
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    return /* @__PURE__ */ s.createElement(
-      "div",
-      {
-        id: this.props.id,
-        className: p("k-toolbar-item", this.props.className),
-        style: this.props.style,
-        ref: (r) => this._element = r
-      },
-      this.props.children
-    );
-  }
+import * as e from "react";
+import c from "prop-types";
+import { classNames as i } from "@progress/kendo-react-common";
+const t = e.forwardRef((s, a) => {
+  const { id: o, className: m, style: l, children: n } = s, r = e.useRef(null);
+  return e.useImperativeHandle(
+    a,
+    () => ({
+      element: r.current
+    })
+  ), /* @__PURE__ */ e.createElement("div", { id: o, className: i("k-toolbar-item", m), style: l, ref: r }, n);
+});
+t.displayName = "KendoReactToolbarItem";
+t.propTypes = {
+  className: c.string
 };
-e.propTypes = {
-  className: i.string
-};
-let t = e;
 export {
   t as ToolbarItem
 };

package/toolbar/tools/ToolbarSeparator.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),c=require("@progress/kendo-react-common");function s(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const o=s(n);class l extends o.PureComponent{render(){return o.createElement("div",{className:c.classNames("k-separator",this.props.className)})}}exports.ToolbarSeparator=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),c=require("@progress/kendo-react-common");function n(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=n(o),l=e=>s.createElement("div",{className:c.classNames("k-separator",e.className)});exports.ToolbarSeparator=l;

package/toolbar/tools/ToolbarSeparator.mjs

@@ -8,14 +8,7 @@
 "use client";
 import * as e from "react";
 import { classNames as r } from "@progress/kendo-react-common";
-class t extends e.PureComponent {
-  /**
-   * @hidden
-   */
-  render() {
-    return /* @__PURE__ */ e.createElement("div", { className: r("k-separator", this.props.className) });
-  }
-}
+const t = (a) => /* @__PURE__ */ e.createElement("div", { className: r("k-separator", a.className) });
 export {
   t as ToolbarSeparator
 };

package/toolbar/tools/ToolbarSpacer.mjs

@@ -9,24 +9,14 @@
 import * as e from "react";
 import m from "prop-types";
 import { classNames as n } from "@progress/kendo-react-common";
-const r = e.forwardRef((s, t) => {
-  const a = e.useRef(null), c = e.useRef(null);
-  e.useImperativeHandle(c, () => ({ element: a.current })), e.useImperativeHandle(t, () => ({ element: a.current }));
-  const l = e.useMemo(
-    () => n(
-      "k-spacer",
-      s.className
-    ),
-    [s.className]
-  );
-  return /* @__PURE__ */ e.createElement(
-    "span",
-    {
-      ref: a,
-      className: l
-    }
-  );
-});
+const r = e.forwardRef(
+  (s, t) => {
+    const a = e.useRef(null), c = e.useRef(null);
+    e.useImperativeHandle(c, () => ({ element: a.current })), e.useImperativeHandle(t, () => ({ element: a.current }));
+    const l = e.useMemo(() => n("k-spacer", s.className), [s.className]);
+    return /* @__PURE__ */ e.createElement("span", { ref: a, className: l });
+  }
+);
 r.displayName = "KendoReactToolbarSpacer";
 r.propTypes = {
   className: m.string