@progress/kendo-react-spreadsheet 7.2.4-develop.3 → 7.3.0-develop.1

package/FormulaInput.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 R=require("react"),S=require("@progress/kendo-react-popup"),w=require("./List.js"),L=require("@progress/kendo-react-common");function O(c){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const o in c)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(c,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>c[o]})}}return u.default=c,Object.freeze(u)}const t=O(R),p=t.forwardRef((c,u)=>{const[o,l]=t.useState(!1),[d,g]=t.useState(0),[k,P]=t.useState([]),s=t.useMemo(()=>({}),[]);s.showPopup=o,s.popupContentKey=d,s.data=k;const h=t.useRef(null),i=t.useRef(null),n=t.useRef(null),m=t.useCallback(()=>{if(n.current&&n.current.element)return n.current.element.querySelector(".k-focus")},[]),y=t.useCallback(()=>{const e=m();e&&e.classList.remove("k-focus")},[]),C=t.useCallback(e=>{const r=Array.from(n.current&&n.current.element.children||[]),f=m();let a;if(f){const b=r.indexOf(f);f.classList.remove("k-focus"),a=r[b+e]?r[b+e]:e===1?r[0]:r[r.length-1]}else a=e===1?r[0]:r[r.length-1];a&&a.classList.add("k-focus")},[]);t.useImperativeHandle(h,()=>({element:i.current,props:c,popup:{open:()=>{l(!0)},close:()=>{l(!1)},position:()=>{g(s.popupContentKey+1)},visible:()=>s.showPopup},list:{get element(){return n.current&&n.current.element},data:e=>{if(e)P(e);else return s.data},value:()=>({}),focus:()=>Array.from(n.current&&n.current.element&&n.current.element.children||[]).indexOf(m()),focusNext:()=>{C(1)},focusPrev:()=>{C(-1)},focusFirst:()=>{const e=n.current&&n.current.element;e&&e.children.item(0)&&(y(),e.children.item(0).classList.add("k-focus"))},focusLast:()=>{const e=n.current&&n.current.element;e&&e.children.length&&(y(),e.children.item(e.children.length-1).classList.add("k-focus"))},itemClick:e=>{s.itemClick=e}}}),[]),t.useImperativeHandle(u,()=>h.current,[]);const v=t.useCallback(e=>{s.itemClick&&s.itemClick(e)},[]);return t.createElement(t.Fragment,null,t.createElement("div",{className:L.classNames("k-spreadsheet-formula-input",c.className),contentEditable:"true",spellCheck:"false",style:{whiteSpace:"pre"},ref:i}),t.createElement(S.Popup,{show:o,anchor:i.current,animate:{openDuration:100,closeDuration:100},contentKey:d,popupClass:"k-list-container"},t.createElement(w.List,{data:k,ref:n,onItemClick:v})))});p.displayName="FormulaInput";p.propTypes={};exports.FormulaInput=p;

package/FormulaInput.mjs

@@ -0,0 +1,109 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import { Popup as L } from "@progress/kendo-react-popup";
+import { List as P } from "./List.mjs";
+import { classNames as R } from "@progress/kendo-react-common";
+const y = t.forwardRef((a, v) => {
+  const [i, m] = t.useState(!1), [p, g] = t.useState(0), [f, w] = t.useState([]), s = t.useMemo(() => ({}), []);
+  s.showPopup = i, s.popupContentKey = p, s.data = f;
+  const d = t.useRef(null), o = t.useRef(null), n = t.useRef(null), l = t.useCallback(() => {
+    if (n.current && n.current.element)
+      return n.current.element.querySelector(".k-focus");
+  }, []), h = t.useCallback(() => {
+    const e = l();
+    e && e.classList.remove("k-focus");
+  }, []), k = t.useCallback((e) => {
+    const r = Array.from(n.current && n.current.element.children || []), u = l();
+    let c;
+    if (u) {
+      const C = r.indexOf(u);
+      u.classList.remove("k-focus"), c = r[C + e] ? r[C + e] : e === 1 ? r[0] : r[r.length - 1];
+    } else
+      c = e === 1 ? r[0] : r[r.length - 1];
+    c && c.classList.add("k-focus");
+  }, []);
+  t.useImperativeHandle(d, () => ({
+    element: o.current,
+    props: a,
+    popup: {
+      open: () => {
+        m(!0);
+      },
+      close: () => {
+        m(!1);
+      },
+      position: () => {
+        g(s.popupContentKey + 1);
+      },
+      visible: () => s.showPopup
+    },
+    list: {
+      get element() {
+        return n.current && n.current.element;
+      },
+      data: (e) => {
+        if (e)
+          w(e);
+        else
+          return s.data;
+      },
+      value: () => ({}),
+      focus: () => Array.from(n.current && n.current.element && n.current.element.children || []).indexOf(l()),
+      // select: (x) => {
+      //     console.log('select', x);
+      // },
+      focusNext: () => {
+        k(1);
+      },
+      focusPrev: () => {
+        k(-1);
+      },
+      focusFirst: () => {
+        const e = n.current && n.current.element;
+        e && e.children.item(0) && (h(), e.children.item(0).classList.add("k-focus"));
+      },
+      focusLast: () => {
+        const e = n.current && n.current.element;
+        e && e.children.length && (h(), e.children.item(e.children.length - 1).classList.add("k-focus"));
+      },
+      itemClick: (e) => {
+        s.itemClick = e;
+      }
+    }
+  }), []), t.useImperativeHandle(v, () => d.current, []);
+  const x = t.useCallback((e) => {
+    s.itemClick && s.itemClick(e);
+  }, []);
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: R("k-spreadsheet-formula-input", a.className),
+      contentEditable: "true",
+      spellCheck: "false",
+      style: { whiteSpace: "pre" },
+      ref: o
+    }
+  ), /* @__PURE__ */ t.createElement(
+    L,
+    {
+      show: i,
+      anchor: o.current,
+      animate: { openDuration: 100, closeDuration: 100 },
+      contentKey: p,
+      popupClass: "k-list-container"
+    },
+    /* @__PURE__ */ t.createElement(P, { data: f, ref: n, onItemClick: x })
+  ));
+});
+y.displayName = "FormulaInput";
+y.propTypes = {};
+export {
+  y as FormulaInput
+};

package/List.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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"),o=require("@progress/kendo-react-common"),i=require("@progress/kendo-svg-icons");function u(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,l.get?l:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=u(c),s=e.forwardRef((t,a)=>{const n=e.useRef(null),l=e.useRef(null);return e.useImperativeHandle(n,()=>({element:l.current,props:t})),e.useImperativeHandle(a,()=>n.current),e.createElement("div",{className:"k-list k-list-md"},e.createElement("div",{className:"k-list-content"},e.createElement("ul",{ref:l,className:"k-spreadsheet-formula-list k-list-ul",onMouseDown:r=>r.preventDefault(),style:{maxHeight:280}},t.data.map(r=>e.createElement("li",{key:r.text,className:"k-list-item",onClick:()=>t.onItemClick(r.value)},e.createElement(o.IconWrap,{name:"formula-fx",icon:i.formulaFxIcon}),e.createElement("span",{className:"k-list-item-text"},r.text))))))});s.displayName="List";s.propTypes={};exports.List=s;

package/List.mjs

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import { IconWrap as m } from "@progress/kendo-react-common";
+import { formulaFxIcon as c } from "@progress/kendo-svg-icons";
+const n = e.forwardRef((a, r) => {
+  const l = e.useRef(null), s = e.useRef(null);
+  return e.useImperativeHandle(l, () => ({
+    element: s.current,
+    props: a
+  })), e.useImperativeHandle(r, () => l.current), /* @__PURE__ */ e.createElement("div", { className: "k-list k-list-md" }, /* @__PURE__ */ e.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ e.createElement(
+    "ul",
+    {
+      ref: s,
+      className: "k-spreadsheet-formula-list k-list-ul",
+      onMouseDown: (t) => t.preventDefault(),
+      style: { maxHeight: 280 }
+    },
+    a.data.map(
+      (t) => /* @__PURE__ */ e.createElement("li", { key: t.text, className: "k-list-item", onClick: () => a.onItemClick(t.value) }, /* @__PURE__ */ e.createElement(m, { name: "formula-fx", icon: c }), /* @__PURE__ */ e.createElement("span", { className: "k-list-item-text" }, t.text))
+    )
+  )));
+});
+n.displayName = "List";
+n.propTypes = {};
+export {
+  n as List
+};

package/NameBox.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 h=require("react"),N=require("@progress/kendo-react-dropdowns"),I=require("@progress/kendo-react-common"),O=require("@progress/kendo-svg-icons"),w=require("@progress/kendo-react-intl"),f=require("./messages.js");function B(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(l,r,s.get?s:{enumerable:!0,get:()=>a[r]})}}return l.default=a,Object.freeze(l)}const t=B(h),p=t.forwardRef((a,l)=>{const r=t.useRef(null),s=t.useRef(null),[i,b]=t.useState([]),[k,g]=t.useState(!1),[c,u]=t.useState(""),m=t.useMemo(()=>({}),[]);m.data=i,t.useImperativeHandle(r,()=>({value:e=>{if(e===void 0){const n=s.current&&s.current.value;return n&&(n.name||n)}else u(e||"")}}),[]),t.useImperativeHandle(l,()=>r.current,[]);const v=t.useCallback(e=>{const n=a.nameEditor();n&&n.trigger("delete",{name:e})},[]),y=t.useCallback((e,n)=>{const o=t.createElement(t.Fragment,null,e.props.children,t.createElement("span",{role:"button",className:"k-button-delete",onClick:()=>v(n.dataItem[n.textField]),onMouseDown:d=>d.preventDefault(),onPointerDown:d=>d.preventDefault(),"data-role":"delete"},t.createElement(I.IconWrap,{name:"x",icon:O.xIcon})));return t.cloneElement(e,e.props,o)},[]),E=t.useCallback(e=>t.cloneElement(e,{...e.props},t.createElement("div",null)),[]),C=t.useCallback(e=>{if(e.syntheticEvent&&e.syntheticEvent.type==="change")return;const n=a.nameEditor();n&&(b(n.readData()),g(!0))},[]),D=t.useCallback(()=>{g(!1)},[]),x=t.useCallback(e=>{if(e.syntheticEvent.target.closest("[data-role]"))return;const n=a.nameEditor();if(n&&e.value){const o=e.value.name;o!==c&&(n.trigger("select",{name:o}),u(o))}},[c]),R=t.useCallback(e=>{const n=a.nameEditor();if(n)if(e.key==="Enter"){const o=e.target.value;n.trigger("enter",{value:o}),u(o)}else e.key==="Escape"&&(n.trigger("cancel"),u(m.prevValue))},[]),S=t.useCallback(e=>{m.prevValue=e.value.name},[]);return t.createElement("div",{className:"k-spreadsheet-name-editor",onKeyDown:R},t.createElement(N.ComboBox,{ref:s,title:w.useLocalization().toLanguageString(f.keys.nameBox,f.messages[f.keys.nameBox]),popupSettings:{className:"k-spreadsheet-names-popup"},fillMode:"flat",clearButton:!1,dataItemKey:"name",textField:"name",itemRender:y,data:i,value:c?i.find(e=>e.name===c)||{name:c}:null,onChange:x,opened:k,onOpen:C,onClose:D,onFocus:S,listNoDataRender:E,allowCustom:!0}))});p.displayName="NameBox";p.propTypes={};exports.NameBox=p;

package/NameBox.mjs

@@ -0,0 +1,109 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import { ComboBox as R } from "@progress/kendo-react-dropdowns";
+import { IconWrap as B } from "@progress/kendo-react-common";
+import { xIcon as I } from "@progress/kendo-svg-icons";
+import { useLocalization as w } from "@progress/kendo-react-intl";
+import { keys as p, messages as S } from "./messages.mjs";
+const f = t.forwardRef((l, g) => {
+  const i = t.useRef(null), s = t.useRef(null), [c, E] = t.useState([]), [k, d] = t.useState(!1), [o, r] = t.useState(""), m = t.useMemo(() => ({}), []);
+  m.data = c, t.useImperativeHandle(i, () => ({
+    value: (e) => {
+      if (e === void 0) {
+        const a = s.current && s.current.value;
+        return a && (a.name || a);
+      } else
+        r(e || "");
+    }
+  }), []), t.useImperativeHandle(g, () => i.current, []);
+  const v = t.useCallback((e) => {
+    const a = l.nameEditor();
+    a && a.trigger("delete", { name: e });
+  }, []), C = t.useCallback((e, a) => {
+    const n = /* @__PURE__ */ t.createElement(t.Fragment, null, e.props.children, /* @__PURE__ */ t.createElement(
+      "span",
+      {
+        role: "button",
+        className: "k-button-delete",
+        onClick: () => v(a.dataItem[a.textField]),
+        onMouseDown: (u) => u.preventDefault(),
+        onPointerDown: (u) => u.preventDefault(),
+        "data-role": "delete"
+      },
+      /* @__PURE__ */ t.createElement(
+        B,
+        {
+          name: "x",
+          icon: I
+        }
+      )
+    ));
+    return t.cloneElement(e, e.props, n);
+  }, []), b = t.useCallback((e) => t.cloneElement(e, { ...e.props }, /* @__PURE__ */ t.createElement("div", null)), []), x = t.useCallback((e) => {
+    if (e.syntheticEvent && e.syntheticEvent.type === "change")
+      return;
+    const a = l.nameEditor();
+    a && (E(a.readData()), d(!0));
+  }, []), y = t.useCallback(() => {
+    d(!1);
+  }, []), h = t.useCallback((e) => {
+    if (e.syntheticEvent.target.closest("[data-role]"))
+      return;
+    const a = l.nameEditor();
+    if (a && e.value) {
+      const n = e.value.name;
+      n !== o && (a.trigger("select", { name: n }), r(n));
+    }
+  }, [o]), D = t.useCallback((e) => {
+    const a = l.nameEditor();
+    if (a)
+      if (e.key === "Enter") {
+        const n = e.target.value;
+        a.trigger("enter", { value: n }), r(n);
+      } else
+        e.key === "Escape" && (a.trigger("cancel"), r(m.prevValue));
+  }, []), N = t.useCallback((e) => {
+    m.prevValue = e.value.name;
+  }, []);
+  return /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: "k-spreadsheet-name-editor",
+      onKeyDown: D
+    },
+    /* @__PURE__ */ t.createElement(
+      R,
+      {
+        ref: s,
+        title: w().toLanguageString(p.nameBox, S[p.nameBox]),
+        popupSettings: { className: "k-spreadsheet-names-popup" },
+        fillMode: "flat",
+        clearButton: !1,
+        dataItemKey: "name",
+        textField: "name",
+        itemRender: C,
+        data: c,
+        value: o ? c.find((e) => e.name === o) || { name: o } : null,
+        onChange: h,
+        opened: k,
+        onOpen: x,
+        onClose: y,
+        onFocus: N,
+        listNoDataRender: b,
+        allowCustom: !0
+      }
+    )
+  );
+});
+f.displayName = "NameBox";
+f.propTypes = {};
+export {
+  f as NameBox
+};

package/SheetsBar.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 L=require("react"),O=require("@progress/kendo-react-buttons"),C=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-sortable"),N=require("@progress/kendo-svg-icons"),j=require("@progress/kendo-react-intl"),w=require("./messages.js");function M(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const c in o)if(c!=="default"){const i=Object.getOwnPropertyDescriptor(o,c);Object.defineProperty(e,c,i.get?i:{enumerable:!0,get:()=>o[c]})}}return e.default=o,Object.freeze(e)}const t=M(L),U={onSelect:()=>{},onDelete:()=>{},onEnterEdit:()=>{},onCancelEdit:()=>{},onExitEdit:()=>{},onEdit:()=>{}},R=t.createContext(U),_=o=>{const e=o.dataItem,{onSelect:c,onDelete:i,onEnterEdit:a,onExitEdit:h,onCancelEdit:u,onEdit:f}=t.useContext(R),p=t.useCallback(n=>{n.target instanceof HTMLElement&&n.target.nodeName==="INPUT"||c.call(void 0,e,n)},[e,c]),v=t.useCallback(n=>{i.call(void 0,e,n)},[e,i]),S=t.useCallback(n=>{n.target instanceof HTMLElement&&n.target.nodeName==="INPUT"||a.call(void 0,e,n)},[e,a]),x=t.useCallback(n=>{h.call(void 0,e,n)},[e,h]),g=t.useCallback(n=>{n.key==="Enter"?h.call(void 0,e,n):n.key==="Escape"&&u.call(void 0,e,n)},[e,h,u]),r=t.useCallback(n=>{f.call(void 0,{...e,text:n.target.value},n)},[e,f]);return t.createElement("li",{style:o.style,...o.attributes,ref:o.forwardRef,role:"tab",className:C.classNames("k-item k-tabstrip-item",{"k-disabled":o.isDisabled,"k-active k-state-tab-on-top k-spreadsheet-sheets-bar-active":e.active,"k-spreadsheet-sheets-bar-inactive":!e.active,"k-first":e.first,"k-last":e.last}),onClick:p,onDoubleClick:S},e.inEdit?t.createElement("input",{type:"text",className:"k-textbox k-spreadsheet-sheets-editor",value:e.text,onChange:r,maxLength:50,autoFocus:!0,onBlur:x,onKeyDown:g}):t.createElement(t.Fragment,null,t.createElement("span",{className:"k-link"},e.text),e.first&&e.last?null:t.createElement("span",{className:"k-link k-spreadsheet-sheets-remove",onClick:v},t.createElement(C.IconWrap,{name:"x",icon:N.xIcon}))))},y=t.forwardRef((o,e)=>{const{children:c,className:i,...a}=o;return t.createElement("ul",{className:C.classNames("k-tabstrip-items k-reset",i),role:"tablist",...a,ref:e},c)});y.displayName="TabsList";const A=o=>{const{sheets:e,setSheets:c,onSheetSelect:i,onSheetDelete:a,onSheetEdit:h,onSheetReorderEnd:u}=o,[f,p]=t.useState(null),v=t.useRef(!1),S=t.useRef(-1),x=t.useCallback(s=>{c(s.map((l,k,d)=>({...l,first:k===0,last:k===d.length-1})))},[]),g=t.useCallback(s=>{x(s.newState)},[x,u]),r=t.useCallback(s=>{u.call(void 0,s)},[u]),n=t.useCallback(s=>{v.current=!0,S.current=s.prevIndex},[]),m=t.useCallback(s=>{setTimeout(()=>{v.current=!1},50),u.call(void 0,{...s,prevIndex:S.current})},[]),E=t.useCallback((s,l)=>{v.current||i.call(void 0,s,l)},[i]),b=t.useCallback((s,l)=>{l.stopPropagation(),a.call(void 0,s)},[e,a]),D=t.useCallback((s,l)=>{l.stopPropagation(),l.preventDefault();const k=e.map(d=>({...d,active:d.id===s.id,inEdit:d.id===s.id}));c(k),p({...s})},[e]),P=t.useCallback((s,l)=>{l.stopPropagation(),l.preventDefault();const k=e.map(d=>({...d,inEdit:!1,text:d.inEdit&&f?f.text:d.text}));c(k),p(null)},[e,f]),T=t.useCallback((s,l)=>{l.stopPropagation(),l.preventDefault();const k=e.map(I=>({...I,inEdit:!1})),d=e.findIndex(I=>I.id===s.id);c(k),p(null),h.call(void 0,s,d)},[e,h]),q=t.useCallback((s,l)=>{l.stopPropagation(),l.preventDefault();const k=e.map(d=>({...d,text:s.id===d.id?s.text:d.text}));c(k)},[e]);return t.createElement("div",{className:"k-spreadsheet-sheets-items k-tabstrip k-floatwrap k-tabstrip-bottom"},t.createElement("div",{className:"k-tabstrip-items-wrapper k-hstack"},t.createElement(R.Provider,{value:{onSelect:E,onDelete:b,onEnterEdit:D,onCancelEdit:P,onExitEdit:T,onEdit:q}},t.createElement(B.Sortable,{idField:"id",data:e,itemUI:_,itemsWrapUI:y,onDragOver:g,onNavigate:r,onDragStart:n,onDragEnd:m}))))},F=(o,e,c)=>o.map((i,a,h)=>({text:i.name(),id:c+"-sheet-"+a,first:a===0,last:a===h.length-1,active:i.name()===e})),z=o=>{const{spreadsheetRef:e}=o,[c,i]=t.useState([]),a=t.useRef((c.find(r=>r.active)||{}).text),h=C.useId(),u=t.useCallback(()=>{e.current&&(e.current.view.sheetsbar.onSheetSelect(a.current),i(F(e.current.sheets(),a.current,h)))},[]),f=t.useCallback(()=>{if(e.current){const r=e.current.sheets();r.find(n=>n.name()===a.current)||(a.current=r[r.length-1].name()),u()}},[]);t.useEffect(()=>(e.current&&(e.current.sheets().length&&(a.current=e.current.sheets()[0].name(),u()),e.current.view.bind("update",f)),()=>{e.current&&e.current.view.unbind("update",f)}),[e.current]);const p=t.useCallback(r=>{a.current!==r.text&&(a.current=r.text,u())},[]),v=t.useCallback(()=>{if(e.current){e.current.view.sheetsbar.onAddSelect();const r=e.current.sheets();a.current=r[r.length-1].name(),u()}},[]),S=t.useCallback(r=>{if(e.current){if(a.current===r.text){const n=e.current.sheets(),m=n.findIndex(b=>b.name()===r.text),E=n[m+1]||n[m-1];a.current=E?E.name():""}e.current.view.sheetsbar.onSheetRemove(r.text),u()}},[]),x=t.useCallback((r,n)=>{if(e.current){let m=r.text;const E=e.current.sheets(),b=E[n];if(!m){a.current=b.name(),u();return}if(b&&b.name()===m)return;E.find(D=>D.name()===m)&&(m=b.name()),e.current.view.sheetsbar.onSheetRename(m,n),a.current=m,u()}},[]),g=t.useCallback(r=>{if(e.current){const{prevIndex:n,nextIndex:m}=r;a.current=e.current.sheets()[n].name(),e.current.view.sheetsbar.onSheetReorderEnd({oldIndex:n,newIndex:m}),u()}},[]);return t.createElement("div",{className:"k-spreadsheet-sheets-bar k-header"},t.createElement(O.Button,{fillMode:"flat",icon:"plus",className:"k-spreadsheet-sheets-bar-add",title:j.useLocalization().toLanguageString(w.keys.addNewSheet,w.messages[w.keys.addNewSheet]),svgIcon:N.plusIcon,onClick:v}),t.createElement(A,{sheets:c,setSheets:i,onSheetSelect:p,onSheetDelete:S,onSheetEdit:x,onSheetReorderEnd:g}))};exports.SheetsBar=z;

package/SheetsBar.mjs

@@ -0,0 +1,211 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import { Button as L } from "@progress/kendo-react-buttons";
+import { classNames as w, useId as U, IconWrap as B } from "@progress/kendo-react-common";
+import { Sortable as A } from "@progress/kendo-react-sortable";
+import { plusIcon as F, xIcon as M } from "@progress/kendo-svg-icons";
+import { useLocalization as H } from "@progress/kendo-react-intl";
+import { keys as I, messages as K } from "./messages.mjs";
+const W = {
+  onSelect: () => {
+  },
+  onDelete: () => {
+  },
+  onEnterEdit: () => {
+  },
+  onCancelEdit: () => {
+  },
+  onExitEdit: () => {
+  },
+  onEdit: () => {
+  }
+}, N = t.createContext(W), z = (u) => {
+  const e = u.dataItem, { onSelect: l, onDelete: d, onEnterEdit: a, onExitEdit: h, onCancelEdit: o, onEdit: p } = t.useContext(N), b = t.useCallback((n) => {
+    n.target instanceof HTMLElement && n.target.nodeName === "INPUT" || l.call(void 0, e, n);
+  }, [e, l]), v = t.useCallback((n) => {
+    d.call(void 0, e, n);
+  }, [e, d]), x = t.useCallback((n) => {
+    n.target instanceof HTMLElement && n.target.nodeName === "INPUT" || a.call(void 0, e, n);
+  }, [e, a]), S = t.useCallback((n) => {
+    h.call(void 0, e, n);
+  }, [e, h]), C = t.useCallback((n) => {
+    n.key === "Enter" ? h.call(void 0, e, n) : n.key === "Escape" && o.call(void 0, e, n);
+  }, [e, h, o]), r = t.useCallback((n) => {
+    p.call(void 0, { ...e, text: n.target.value }, n);
+  }, [e, p]);
+  return /* @__PURE__ */ t.createElement(
+    "li",
+    {
+      style: u.style,
+      ...u.attributes,
+      ref: u.forwardRef,
+      role: "tab",
+      className: w("k-item k-tabstrip-item", {
+        "k-disabled": u.isDisabled,
+        "k-active k-state-tab-on-top k-spreadsheet-sheets-bar-active": e.active,
+        "k-spreadsheet-sheets-bar-inactive": !e.active,
+        "k-first": e.first,
+        "k-last": e.last
+      }),
+      onClick: b,
+      onDoubleClick: x
+    },
+    e.inEdit ? /* @__PURE__ */ t.createElement(
+      "input",
+      {
+        type: "text",
+        className: "k-textbox k-spreadsheet-sheets-editor",
+        value: e.text,
+        onChange: r,
+        maxLength: 50,
+        autoFocus: !0,
+        onBlur: S,
+        onKeyDown: C
+      }
+    ) : /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { className: "k-link" }, e.text), e.first && e.last ? null : /* @__PURE__ */ t.createElement("span", { className: "k-link k-spreadsheet-sheets-remove", onClick: v }, /* @__PURE__ */ t.createElement(B, { name: "x", icon: M })))
+  );
+}, R = t.forwardRef((u, e) => {
+  const { children: l, className: d, ...a } = u;
+  return /* @__PURE__ */ t.createElement(
+    "ul",
+    {
+      className: w("k-tabstrip-items k-reset", d),
+      role: "tablist",
+      ...a,
+      ref: e
+    },
+    l
+  );
+});
+R.displayName = "TabsList";
+const O = (u) => {
+  const { sheets: e, setSheets: l, onSheetSelect: d, onSheetDelete: a, onSheetEdit: h, onSheetReorderEnd: o } = u, [p, b] = t.useState(null), v = t.useRef(!1), x = t.useRef(-1), S = t.useCallback((s) => {
+    l(s.map((c, f, i) => ({ ...c, first: f === 0, last: f === i.length - 1 })));
+  }, []), C = t.useCallback((s) => {
+    S(s.newState);
+  }, [S, o]), r = t.useCallback((s) => {
+    o.call(void 0, s);
+  }, [o]), n = t.useCallback((s) => {
+    v.current = !0, x.current = s.prevIndex;
+  }, []), m = t.useCallback((s) => {
+    setTimeout(() => {
+      v.current = !1;
+    }, 50), o.call(void 0, { ...s, prevIndex: x.current });
+  }, []), E = t.useCallback((s, c) => {
+    v.current || d.call(void 0, s, c);
+  }, [d]), k = t.useCallback((s, c) => {
+    c.stopPropagation(), a.call(void 0, s);
+  }, [e, a]), g = t.useCallback((s, c) => {
+    c.stopPropagation(), c.preventDefault();
+    const f = e.map((i) => ({ ...i, active: i.id === s.id, inEdit: i.id === s.id }));
+    l(f), b({ ...s });
+  }, [e]), y = t.useCallback((s, c) => {
+    c.stopPropagation(), c.preventDefault();
+    const f = e.map((i) => ({ ...i, inEdit: !1, text: i.inEdit && p ? p.text : i.text }));
+    l(f), b(null);
+  }, [e, p]), P = t.useCallback((s, c) => {
+    c.stopPropagation(), c.preventDefault();
+    const f = e.map((D) => ({ ...D, inEdit: !1 })), i = e.findIndex((D) => D.id === s.id);
+    l(f), b(null), h.call(void 0, s, i);
+  }, [e, h]), T = t.useCallback((s, c) => {
+    c.stopPropagation(), c.preventDefault();
+    const f = e.map((i) => ({ ...i, text: s.id === i.id ? s.text : i.text }));
+    l(f);
+  }, [e]);
+  return /* @__PURE__ */ t.createElement("div", { className: "k-spreadsheet-sheets-items k-tabstrip k-floatwrap k-tabstrip-bottom" }, /* @__PURE__ */ t.createElement("div", { className: "k-tabstrip-items-wrapper k-hstack" }, /* @__PURE__ */ t.createElement(N.Provider, { value: { onSelect: E, onDelete: k, onEnterEdit: g, onCancelEdit: y, onExitEdit: P, onEdit: T } }, /* @__PURE__ */ t.createElement(
+    A,
+    {
+      idField: "id",
+      data: e,
+      itemUI: z,
+      itemsWrapUI: R,
+      onDragOver: C,
+      onNavigate: r,
+      onDragStart: n,
+      onDragEnd: m
+    }
+  ))));
+}, V = (u, e, l) => u.map((d, a, h) => ({
+  text: d.name(),
+  id: l + "-sheet-" + a,
+  first: a === 0,
+  last: a === h.length - 1,
+  active: d.name() === e
+})), X = (u) => {
+  const { spreadsheetRef: e } = u, [l, d] = t.useState([]), a = t.useRef((l.find((r) => r.active) || {}).text), h = U(), o = t.useCallback(() => {
+    e.current && (e.current.view.sheetsbar.onSheetSelect(a.current), d(V(e.current.sheets(), a.current, h)));
+  }, []), p = t.useCallback(() => {
+    if (e.current) {
+      const r = e.current.sheets();
+      r.find((n) => n.name() === a.current) || (a.current = r[r.length - 1].name()), o();
+    }
+  }, []);
+  t.useEffect(() => (e.current && (e.current.sheets().length && (a.current = e.current.sheets()[0].name(), o()), e.current.view.bind("update", p)), () => {
+    e.current && e.current.view.unbind("update", p);
+  }), [e.current]);
+  const b = t.useCallback((r) => {
+    a.current !== r.text && (a.current = r.text, o());
+  }, []), v = t.useCallback(() => {
+    if (e.current) {
+      e.current.view.sheetsbar.onAddSelect();
+      const r = e.current.sheets();
+      a.current = r[r.length - 1].name(), o();
+    }
+  }, []), x = t.useCallback((r) => {
+    if (e.current) {
+      if (a.current === r.text) {
+        const n = e.current.sheets(), m = n.findIndex((k) => k.name() === r.text), E = n[m + 1] || n[m - 1];
+        a.current = E ? E.name() : "";
+      }
+      e.current.view.sheetsbar.onSheetRemove(r.text), o();
+    }
+  }, []), S = t.useCallback((r, n) => {
+    if (e.current) {
+      let m = r.text;
+      const E = e.current.sheets(), k = E[n];
+      if (!m) {
+        a.current = k.name(), o();
+        return;
+      }
+      if (k && k.name() === m)
+        return;
+      E.find((g) => g.name() === m) && (m = k.name()), e.current.view.sheetsbar.onSheetRename(m, n), a.current = m, o();
+    }
+  }, []), C = t.useCallback((r) => {
+    if (e.current) {
+      const { prevIndex: n, nextIndex: m } = r;
+      a.current = e.current.sheets()[n].name(), e.current.view.sheetsbar.onSheetReorderEnd({ oldIndex: n, newIndex: m }), o();
+    }
+  }, []);
+  return /* @__PURE__ */ t.createElement("div", { className: "k-spreadsheet-sheets-bar k-header" }, /* @__PURE__ */ t.createElement(
+    L,
+    {
+      fillMode: "flat",
+      icon: "plus",
+      className: "k-spreadsheet-sheets-bar-add",
+      title: H().toLanguageString(I.addNewSheet, K[I.addNewSheet]),
+      svgIcon: F,
+      onClick: v
+    }
+  ), /* @__PURE__ */ t.createElement(
+    O,
+    {
+      sheets: l,
+      setSheets: d,
+      onSheetSelect: b,
+      onSheetDelete: x,
+      onSheetEdit: S,
+      onSheetReorderEnd: C
+    }
+  ));
+};
+export {
+  X as SheetsBar
+};

package/Spreadsheet.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 te=require("react"),s=require("prop-types"),y=require("@progress/kendo-react-buttons"),L=require("@progress/kendo-react-layout"),z=require("@progress/kendo-react-dialogs"),P=require("./FormulaInput.js"),re=require("./NameBox.js"),ne=require("./SheetsBar.js"),oe=require("@progress/kendo-spreadsheet-common"),M=require("./tools/defaultTools.js"),h=require("@progress/kendo-react-common"),W=require("./package-metadata.js"),ae=require("@progress/kendo-svg-icons"),C=require("@progress/kendo-react-intl"),se=require("@progress/kendo-file-saver"),le=require("@progress/kendo-ooxml"),l=require("./messages.js");function ce(e){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const m in e)if(m!=="default"){const f=Object.getOwnPropertyDescriptor(e,m);Object.defineProperty(g,m,f.get?f:{enumerable:!0,get:()=>e[m]})}}return g.default=e,Object.freeze(g)}const r=ce(te),j=["bold","italic","underline","fontFamily","fontSize","color","background","textAlign","verticalAlign","wrap","gridLines"],D={Bold:e=>e.bold,Italic:e=>e.italic,Underline:e=>e.underline,FontFamily:e=>e.fontFamily,FontSize:e=>e.fontSize,IncreaseFontSize:e=>e.fontSize,DecreaseFontSize:e=>e.fontSize,TextColor:e=>e.color,BackgroundColor:e=>e.background,Alignment:e=>({textAlign:e.textAlign,verticalAlign:e.verticalAlign}),AlignHorizontally:e=>e.textAlign,AlignVertically:e=>e.verticalAlign,TextWrap:e=>e.wrap,GridLines:e=>e.gridLines,AddColumnLeft:e=>e.selectedHeaders,AddColumnRight:e=>e.selectedHeaders,AddRowBelow:e=>e.selectedHeaders,AddRowAbove:e=>e.selectedHeaders,DeleteColumn:e=>e.selectedHeaders,DeleteRow:e=>e.selectedHeaders},J=":not(.k-dropdownlist button):not(.k-combobox button):not(.k-upload-button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",ie=["button"+J,".k-button-group > button"+J,".k-dropdownlist",".k-combobox",".k-colorpicker"],w=r.forwardRef((e,g)=>{h.validatePackage(W.packageMetadata);const m=h.shouldShowValidationUI(W.packageMetadata),{toolbar:f=M.defaultTabs}=e,p=[];typeof f=="boolean"?p.push(...f?M.defaultTabs:[]):p.push(...f);const[i,N]=r.useState(null),[K,_]=r.useState(p.findIndex(t=>t.selected)||0),[ue,G]=r.useState(!1),v=r.useRef(null),R=r.useRef(null),I=r.useRef(null),A=r.useRef(null),a=r.useRef(null),[E,U]=r.useState({}),S=r.useRef({});S.current=E;const c=r.useRef({});c.current=e;const x=C.useLocalization(),V=r.useCallback(t=>{c.current.onSelect&&c.current.onSelect.call(void 0,t)},[]),Q=r.useCallback(t=>{c.current.onChange&&c.current.onChange.call(void 0,t)},[]),X=r.useCallback(t=>{c.current.onChangeFormat&&c.current.onChangeFormat.call(void 0,t)},[]),Y=r.useCallback(t=>{c.current.onExcelImport&&c.current.onExcelImport.call(void 0,t)},[]),Z=r.useCallback(t=>{c.current.onExcelExport&&c.current.onExcelExport.call(void 0,t)},[]),F=r.useRef(null);r.useImperativeHandle(F,()=>({element:v.current,get instance(){return a.current},props:e,get view(){return a.current.view},get workbook(){return a.current.workbook},executeCommand(t){var n;(n=a.current)==null||n.executeCommand(t)},fromJSON(t){var n;return(n=a.current)==null?void 0:n.fromJSON(t)},toJSON(){return a.current.toJSON()},saveJSON(){return a.current.saveJSON()},fromFile(t){return a.current.fromFile(t)},saveAsExcel(t){var n;(n=a.current)==null||n.saveAsExcel({...a.current.options.excel,saveAs:se.saveAs,Workbook:le.Workbook,...t})},activeSheet(t){var n;return(n=a.current)==null?void 0:n.activeSheet(t)},sheets(){return a.current.sheets()},refresh(){var t;return(t=a.current)==null?void 0:t.refresh()}}),[e]),r.useImperativeHandle(g,()=>F.current);const $=r.useCallback(()=>a.current&&a.current.view.nameEditor,[]),q=r.useCallback(t=>{const n={};j.forEach(o=>{typeof t.range[o]=="function"?n[o]=t.range[o]():o==="gridLines"&&(n[o]=t.range.sheet().showGridLines())}),n.selectedHeaders=t.range.sheet().selectedHeaders(),(j.some(o=>n[o]!==S.current[o])||n.selectedHeaders.allCols!==S.current.selectedHeaders.allCols||n.selectedHeaders.allRows!==S.current.selectedHeaders.allRows)&&U(n)},[]),ee=r.useCallback(t=>{const n=t.name,o=l.keys[n];N({title:t.title==="Error"?x.toLanguageString(l.keys.error,l.messages[l.keys.error]||t.title):t.title,message:o?x.toLanguageString(o,l.messages[o]||t.text):t.text,close:t.close})},[]),T=r.useCallback(()=>{N(null),i==null||i.close()},[i]),k=C.useInternationalization(),H=C.useLocalization();r.useEffect(()=>{var b;const t={...e.defaultProps,sheets:structuredClone((b=e.defaultProps)==null?void 0:b.sheets),messages:{workbook:{defaultSheetName:H.toLanguageString(l.keys.defaultSheetName,l.messages[l.keys.defaultSheetName])}},intl:{localeInfo:()=>k.localeInfo(),localeCurrency:()=>k.localeCurrency(),parseDate:(u,d)=>k.parseDate(u,d),toString:(u,d)=>k.toString(u,d),format:(u,...d)=>k.format(u,...d)},formulaBarInputRef:R,formulaCellInputRef:I,nameBoxRef:A},n=new oe.SpreadsheetWidget(v.current,t);a.current=n,n.bind("select",V),n.bind("change",Q),n.bind("changeFormat",X),n.bind("excelImport",Y),n.bind("excelExport",Z),n.view.bind("update",q),n.view.bind("message",ee);const o=n.activeSheet();return o&&q({range:o.range(o.activeCell())}),G(!0),()=>{n.destroy()}},[]);const O=r.useCallback((t,n)=>{const o=r.createElement(t,{spreadsheetRef:a,value:D[t.displayName]?D[t.displayName](E):void 0,key:n});return o.type===y.ToolbarSeparator?r.createElement(t,{key:n}):o},[E]);let B=null;return p.length&&(B=r.createElement(L.TabStrip,{selected:K,animation:!1,className:"k-floatwrap k-spreadsheet-tabstrip",style:{minHeight:"auto"},onSelect:t=>_(t.selected)},p.map(t=>{const n=t.textKey?H.toLanguageString(t.textKey,l.messages[t.textKey]):t.text;return r.createElement(L.TabStripTab,{key:t.textKey||t.text,title:n},r.createElement(y.Toolbar,{buttons:ie,className:"k-spreadsheet-toolbar"},t.tools.map((o,b)=>Array.isArray(o)?r.createElement(y.ButtonGroup,{key:b},o.map((u,d)=>O(u,d))):O(o,b))))}))),r.createElement("div",{ref:v,style:e.style,className:h.classNames("k-widget k-spreadsheet",e.className),role:"application"},B,r.createElement("div",{className:"k-spreadsheet-action-bar"},r.createElement(re.NameBox,{ref:A,nameEditor:$}),r.createElement("div",{className:"k-spreadsheet-formula-bar"},r.createElement(h.IconWrap,{name:"formula-fx",icon:ae.formulaFxIcon}),r.createElement(P.FormulaInput,{ref:R}))),r.createElement("div",{className:"k-spreadsheet-view"},r.createElement("div",{className:"k-spreadsheet-fixed-container"}),r.createElement("div",{className:"k-spreadsheet-scroller"},r.createElement("div",{className:"k-spreadsheet-view-size"})),r.createElement("div",{tabIndex:0,className:"k-spreadsheet-clipboard",contentEditable:"true"}),r.createElement(P.FormulaInput,{ref:I,className:"k-spreadsheet-cell-editor"})),r.createElement(ne.SheetsBar,{spreadsheetRef:a}),i&&r.createElement(z.Dialog,{title:i.title,onClose:T},r.createElement("div",null,i.message),r.createElement(z.DialogActionsBar,{layout:"start"},r.createElement(y.Button,{themeColor:"primary",onClick:T,autoFocus:!0},x.toLanguageString(l.keys.ok,l.messages[l.keys.ok])))),m&&r.createElement(h.WatermarkOverlay,null))});w.displayName="KendoReactSpreadsheet";w.propTypes={className:s.string,defaultProps:s.any,toolbar:s.oneOfType([s.bool,s.arrayOf(s.any)]),style:s.object,onSelect:s.func,onChange:s.func,onChangeFormat:s.func,onExcelImport:s.func,onExcelExport:s.func};exports.Spreadsheet=w;