schedulant 2.0.9-fixed.3 → 2.1.0

package/dist/schedulant.js

@@ -1,6 +1,6 @@
 import { jsx as a, Fragment as At, jsxs as O } from "react/jsx-runtime";
 import * as ie from "react";
-import { createContext as bt, useReducer as Mt, useEffect as N, useContext as wt, useRef as k, useCallback as C, useState as re, useMemo as F, memo as ae, useLayoutEffect as Et } from "react";
+import { createContext as Mt, useReducer as bt, useEffect as N, useContext as wt, useRef as k, useCallback as C, useState as re, useMemo as F, memo as ae, useLayoutEffect as Et } from "react";
 import E from "dayjs";
 import Ct from "dayjs/plugin/weekYear";
 import Dt from "dayjs/plugin/weekOfYear";
@@ -10,7 +10,7 @@ import { Dropdown as Z, Space as kt } from "antd";
 import X from "@ant-design/icons/lib/components/Icon";
 import { PlusSquareOutlined as xt, MinusSquareOutlined as Ot } from "@ant-design/icons";
 import { useSortable as It, SortableContext as Pt, verticalListSortingStrategy as Lt } from "@dnd-kit/sortable";
-import { useSensors as Nt, useSensor as _e, PointerSensor as Yt, KeyboardSensor as _t, DndContext as Wt, closestCenter as Ht, DragOverlay as zt } from "@dnd-kit/core";
+import { useSensors as Nt, useSensor as _e, PointerSensor as Yt, KeyboardSensor as _t, DndContext as Wt, closestCenter as zt, DragOverlay as Ht } from "@dnd-kit/core";
 import { restrictToVerticalAxis as Vt } from "@dnd-kit/modifiers";
 import { flushSync as Ft } from "react-dom";
 const de = {
@@ -49,8 +49,8 @@ const de = {
     default:
       return t;
   }
-}, ut = bt(void 0), Ut = ({ children: t }) => {
-  const [e, n] = Mt(qt, void 0, Bt);
+}, ut = Mt(void 0), Ut = ({ children: t }) => {
+  const [e, n] = bt(qt, void 0, Bt);
   return N(() => {
     localStorage.setItem(dt, JSON.stringify(e));
   }, [e]), /* @__PURE__ */ a(ut.Provider, { value: { state: e, dispatch: n }, children: t });
@@ -59,12 +59,12 @@ const de = {
   if (t === void 0)
     throw new Error("useSchedulantContext must be used within a SchedulantProvider");
   return t;
-}, w = (t) => `${t}px`, oe = (t) => Number(t.replace(/px$/, "")), We = (t) => document.querySelector(`.${t}`), jt = 0.7, W = 10, ht = 16, He = 13, $t = 0.3, ze = 0.8, Gt = 0.25, Xt = 0.75, Qt = 100, Kt = (t) => {
+}, w = (t) => `${t}px`, oe = (t) => Number(t.replace(/px$/, "")), We = (t) => document.querySelector(`.${t}`), jt = 0.7, W = 10, ht = 16, ze = 13, $t = 0.3, He = 0.8, Gt = 0.25, Xt = 0.75, Qt = 100, Kt = (t) => {
   N(() => {
-    const e = document.getElementById("schedulant-view-harness"), n = document.getElementById("schedulant-datagrid-body"), s = document.getElementById("schedulant-timeline-head"), i = n ? n.getBoundingClientRect().height : 0, r = s ? s.getBoundingClientRect().height : 0, o = i + r + He, l = t - o > 0 ? o : t;
+    const e = document.getElementById("schedulant-view-harness"), n = document.getElementById("schedulant-datagrid-body"), s = document.getElementById("schedulant-timeline-head"), i = n ? n.getBoundingClientRect().height : 0, r = s ? s.getBoundingClientRect().height : 0, o = i + r + ze, l = t - o > 0 ? o : t;
     e && (e.style.height = w(l));
     const c = () => {
-      const m = n ? n.getBoundingClientRect().height : 0, g = s ? s.getBoundingClientRect().height : 0, h = m + g + He, u = t - h > 0 ? h : t;
+      const m = n ? n.getBoundingClientRect().height : 0, g = s ? s.getBoundingClientRect().height : 0, h = m + g + ze, u = t - h > 0 ? h : t;
       e && (e.style.height = w(u));
     }, d = new ResizeObserver(() => {
       c();
@@ -296,15 +296,15 @@ class le {
       const u = g.pop();
       if (u) {
         const { parentId: A, depth: p } = u, v = h.get(A);
-        v && v.sort(le.compare).forEach((b) => {
-          const f = b.getId();
-          b.setDepth(p), b.setParent(c.get(A)), b.setChildren(h.get(f) || []);
+        v && v.sort(le.compare).forEach((M) => {
+          const f = M.getId();
+          M.setDepth(p), M.setParent(c.get(A)), M.setChildren(h.get(f) || []);
           const y = l.get(f) || [];
-          y.forEach((D) => D.setResourceApi(b)), b.setEventApis(y);
+          y.forEach((D) => D.setResourceApi(M)), M.setEventApis(y);
           const S = d.get(f) || [];
-          S.forEach((D) => D.setResourceApi(b)), b.setMilestoneApis(S);
-          const M = m.get(f) || [];
-          M.forEach((D) => D.setResourceApi(b)), b.setCheckpointApis(M), g.push({ parentId: f, depth: p + 1 });
+          S.forEach((D) => D.setResourceApi(M)), M.setMilestoneApis(S);
+          const b = m.get(f) || [];
+          b.forEach((D) => D.setResourceApi(M)), M.setCheckpointApis(b), g.push({ parentId: f, depth: p + 1 });
         });
       }
     }
@@ -826,7 +826,7 @@ const on = (t, e, n) => {
         });
       };
   }, [t, e, n]);
-}, H = ({ condition: t, children: e, fallback: n }) => /* @__PURE__ */ a(At, { children: t ? e : n }), ln = (t, e, n) => {
+}, z = ({ condition: t, children: e, fallback: n }) => /* @__PURE__ */ a(At, { children: t ? e : n }), ln = (t, e, n) => {
   const s = k(-1), i = C(() => We("schedulant-datagrid-head"), []), r = C(() => We("schedulant-datagrid-body"), []), o = C((h) => {
     h.preventDefault();
     const u = n.current;
@@ -844,10 +844,10 @@ const on = (t, e, n) => {
     u ? u.addEventListener("mousemove", o) : console.error("scheduleEl", u);
   }, [o, e]), d = C((h) => {
     h.preventDefault();
-    const u = s.current, A = i(), p = r(), v = A.firstElementChild, b = p.firstElementChild, f = v?.children, y = b?.children;
+    const u = s.current, A = i(), p = r(), v = A.firstElementChild, M = p.firstElementChild, f = v?.children, y = M?.children;
     if (f && y) {
-      const S = f[u], M = y[u], D = h.clientX - S.getBoundingClientRect().left, T = h.clientX - M.getBoundingClientRect().left;
-      S.style.width = w(D), M.style.width = w(T);
+      const S = f[u], b = y[u], D = h.clientX - S.getBoundingClientRect().left, T = h.clientX - b.getBoundingClientRect().left;
+      S.style.width = w(D), b.style.width = w(T);
     }
   }, [r, i, s]), m = C((h) => {
     h.preventDefault(), s.current = -1;
@@ -861,8 +861,8 @@ const on = (t, e, n) => {
       v.length === 0 && (v = p.getElementsByTagName("th"));
       for (let y = 0; y < v.length; y++)
         v[y] === A && (s.current = y);
-      const b = i(), f = r();
-      b.addEventListener("mousemove", d), f.addEventListener("mousemove", d);
+      const M = i(), f = r();
+      M.addEventListener("mousemove", d), f.addEventListener("mousemove", d);
     } else
       console.error("trElement", p);
   }, [i, r, d, s]);
@@ -900,7 +900,7 @@ const on = (t, e, n) => {
             children: t.resourceAreaColumn.headerContent
           }
         ) }),
-        /* @__PURE__ */ a(H, { condition: t.isResizable, children: /* @__PURE__ */ a(
+        /* @__PURE__ */ a(z, { condition: t.isResizable, children: /* @__PURE__ */ a(
           "div",
           {
             className: "schedulant-datagrid-cell-resizer",
@@ -1020,13 +1020,13 @@ function mn(t, e, n) {
 }
 const gn = (t) => {
   const { dispatch: e } = Te(), n = k(null), i = t.schedulantApi.getScheduleView().getTimelineView().calculateLaneHeight(t.resourceApi), r = C((y, S) => {
-    const M = S.getResource();
-    if (Object.keys(M).includes(y)) {
-      const I = M[y];
+    const b = S.getResource();
+    if (Object.keys(b).includes(y)) {
+      const I = b[y];
       if (typeof I == "string")
         return I;
     } else {
-      const I = M.extendedProps?.[y];
+      const I = b.extendedProps?.[y];
       if (typeof I == "string" || typeof I == "number")
         return I;
     }
@@ -1040,8 +1040,8 @@ const gn = (t) => {
   }), h = t.overId === o && t.activeId !== o, u = () => {
     const y = ["schedulant-datagrid-cell", "schedulant-resource"];
     return mt().has(o) && y.push("schedulant-resource-selected"), t.isDraggable && g && y.push("schedulant-resource-dragging"), t.isDraggable && h && t.dropPosition && y.push(`schedulant-resource-drop-${t.dropPosition}`), y.join(" ");
-  }, [A, p] = re(!1), [v, b] = re({}), f = C((y) => {
-    y && b(mn(t.schedulantApi, t.resourceApi, t.resourceAreaColumn)), p(y);
+  }, [A, p] = re(!1), [v, M] = re({}), f = C((y) => {
+    y && M(mn(t.schedulantApi, t.resourceApi, t.resourceAreaColumn)), p(y);
   }, [t.schedulantApi, t.resourceApi, t.resourceAreaColumn]);
   return /* @__PURE__ */ a(
     "td",
@@ -1098,7 +1098,7 @@ const gn = (t) => {
                     t.showPlusSquare && t.resourceApi.getMilestoneApis().length > 0 && /* @__PURE__ */ a("span", { className: "schedulant-milestone-indicator", children: /* @__PURE__ */ a(dn, { width: 14, height: 14, color: "#91003c" }) })
                   ] })
                 ] }) }),
-                /* @__PURE__ */ a(H, { condition: t.isResizable, children: /* @__PURE__ */ a("div", { className: "schedulant-datagrid-cell-resizer", onMouseUp: t.cellResizerMouseUp, onMouseDown: t.cellResizerMouseDownFunc(n) }) })
+                /* @__PURE__ */ a(z, { condition: t.isResizable, children: /* @__PURE__ */ a("div", { className: "schedulant-datagrid-cell-resizer", onMouseUp: t.cellResizerMouseUp, onMouseDown: t.cellResizerMouseDownFunc(n) }) })
               ]
             }
           )
@@ -1180,7 +1180,7 @@ function An() {
   return fe = e, fe;
 }
 var pe, je;
-function bn() {
+function Mn() {
   if (je) return pe;
   je = 1;
   var t = An(), e = /^\s+/;
@@ -1197,7 +1197,7 @@ function ft() {
   return ye = e, ye;
 }
 var ve, Ge;
-function Mn() {
+function bn() {
   if (Ge) return ve;
   Ge = 1;
   var t = ft(), e = Object.prototype, n = e.hasOwnProperty, s = e.toString, i = t ? t.toStringTag : void 0;
@@ -1227,36 +1227,36 @@ var Ae, Qe;
 function En() {
   if (Qe) return Ae;
   Qe = 1;
-  var t = ft(), e = Mn(), n = wn(), s = "[object Null]", i = "[object Undefined]", r = t ? t.toStringTag : void 0;
+  var t = ft(), e = bn(), n = wn(), s = "[object Null]", i = "[object Undefined]", r = t ? t.toStringTag : void 0;
   function o(l) {
     return l == null ? l === void 0 ? i : s : r && r in Object(l) ? e(l) : n(l);
   }
   return Ae = o, Ae;
 }
-var be, Ke;
+var Me, Ke;
 function Cn() {
-  if (Ke) return be;
+  if (Ke) return Me;
   Ke = 1;
   function t(e) {
     return e != null && typeof e == "object";
   }
-  return be = t, be;
+  return Me = t, Me;
 }
-var Me, Ze;
+var be, Ze;
 function Dn() {
-  if (Ze) return Me;
+  if (Ze) return be;
   Ze = 1;
   var t = En(), e = Cn(), n = "[object Symbol]";
   function s(i) {
     return typeof i == "symbol" || e(i) && t(i) == n;
   }
-  return Me = s, Me;
+  return be = s, be;
 }
 var we, Je;
 function Tn() {
   if (Je) return we;
   Je = 1;
-  var t = bn(), e = xe(), n = Dn(), s = NaN, i = /^[-+]0x[0-9a-f]+$/i, r = /^0b[01]+$/i, o = /^0o[0-7]+$/i, l = parseInt;
+  var t = Mn(), e = xe(), n = Dn(), s = NaN, i = /^[-+]0x[0-9a-f]+$/i, r = /^0b[01]+$/i, o = /^0o[0-7]+$/i, l = parseInt;
   function c(d) {
     if (typeof d == "number")
       return d;
@@ -1280,16 +1280,16 @@ function Rn() {
   et = 1;
   var t = xe(), e = Sn(), n = Tn(), s = "Expected a function", i = Math.max, r = Math.min;
   function o(l, c, d) {
-    var m, g, h, u, A, p, v = 0, b = !1, f = !1, y = !0;
+    var m, g, h, u, A, p, v = 0, M = !1, f = !1, y = !0;
     if (typeof l != "function")
       throw new TypeError(s);
-    c = n(c) || 0, t(d) && (b = !!d.leading, f = "maxWait" in d, h = f ? i(n(d.maxWait) || 0, c) : h, y = "trailing" in d ? !!d.trailing : y);
+    c = n(c) || 0, t(d) && (M = !!d.leading, f = "maxWait" in d, h = f ? i(n(d.maxWait) || 0, c) : h, y = "trailing" in d ? !!d.trailing : y);
     function S(R) {
       var V = m, q = g;
       return m = g = void 0, v = R, u = l.apply(q, V), u;
     }
-    function M(R) {
-      return v = R, A = setTimeout(I, c), b ? S(R) : u;
+    function b(R) {
+      return v = R, A = setTimeout(I, c), M ? S(R) : u;
     }
     function D(R) {
       var V = R - p, q = R - v, Q = c - V;
@@ -1311,20 +1311,20 @@ function Rn() {
     function Y() {
       A !== void 0 && clearTimeout(A), v = 0, m = p = g = A = void 0;
     }
-    function z() {
+    function H() {
       return A === void 0 ? u : P(e());
     }
     function _() {
       var R = e(), V = T(R);
       if (m = arguments, g = this, p = R, V) {
         if (A === void 0)
-          return M(p);
+          return b(p);
         if (f)
           return clearTimeout(A), A = setTimeout(I, c), S(p);
       }
       return A === void 0 && (A = setTimeout(I, c)), u;
     }
-    return _.cancel = Y, _.flush = z, _;
+    return _.cancel = Y, _.flush = H, _;
   }
   return Ee = o, Ee;
 }
@@ -1348,15 +1348,15 @@ function kn() {
 var xn = kn();
 const pt = /* @__PURE__ */ yn(xn), On = (t) => {
   const e = F(() => "schedulant-timeline-event-position-guide", []), n = k(0), s = k(0), i = k(0), r = k(!1), o = k("none"), l = C((f) => {
-    const M = t.schedulantApi.getScheduleView().getTimelineView(), D = f - n.current, T = t.timelineWidth, I = M.getTotalSlots(), P = Math.round(D / T * I), Y = P / I * T;
+    const b = t.schedulantApi.getScheduleView().getTimelineView(), D = f - n.current, T = t.timelineWidth, I = b.getTotalSlots(), P = Math.round(D / T * I), Y = P / I * T;
     return { moveSlots: P, distance: Y, deltaX: D };
   }, [t]), c = C((f) => {
-    const y = t.schedulantApi.getScheduleView().getTimelineView(), S = f.style.left, M = f.style.right, D = y.calculateLaneHeight(t.resourceApi), T = document.createElement("div");
+    const y = t.schedulantApi.getScheduleView().getTimelineView(), S = f.style.left, b = f.style.right, D = y.calculateLaneHeight(t.resourceApi), T = document.createElement("div");
     T.className = e, Object.assign(T.style, {
       position: "absolute",
       zIndex: 1,
       left: S,
-      right: M,
+      right: b,
       height: w(D),
       backgroundColor: t.schedulantApi.getDragHintColor()
     }), f.parentNode?.insertBefore(T, f);
@@ -1366,8 +1366,8 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
   }, [e]), m = C((f, y) => {
     const S = f.previousElementSibling;
     if (S && S.className === e) {
-      const M = o.current, { distance: D } = l(y);
-      switch (M) {
+      const b = o.current, { distance: D } = l(y);
+      switch (b) {
         case "press_event": {
           S.style.left = w(Math.max(s.current + D, 0)), S.style.right = w(i.current - D);
           break;
@@ -1385,17 +1385,17 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
       }
     }
   }, [l, e]), g = C((f, y) => {
-    const S = t.eventApi, M = t.schedulantApi, D = o.current, { moveSlots: T, distance: I } = l(y);
+    const S = t.eventApi, b = t.schedulantApi, D = o.current, { moveSlots: T, distance: I } = l(y);
     switch (D) {
       case "press_event": {
         f.style.left = w(Math.max(s.current + I, 0)), f.style.right = w(i.current - I);
         const P = S.getStart().add(T, "day"), Y = S.getEnd().add(T, "day");
-        M.eventMove({
+        b.eventMove({
           el: f,
           startDate: P,
           endDate: Y,
           eventApi: S,
-          schedulantApi: M
+          schedulantApi: b
         });
         break;
       }
@@ -1403,11 +1403,11 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
         const P = Math.max(s.current + I, 0);
         f.style.left = w(P);
         const Y = S.getStart().add(T, "day");
-        M.eventResizeStart({
+        b.eventResizeStart({
           el: f,
           date: Y,
           eventApi: S,
-          schedulantApi: M
+          schedulantApi: b
         });
         break;
       }
@@ -1415,11 +1415,11 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
         const P = i.current - I;
         f.style.right = w(P);
         const Y = S.getEnd().add(T, "day");
-        M.eventResizeEnd({
+        b.eventResizeEnd({
           el: f,
           date: Y,
           eventApi: S,
-          schedulantApi: M
+          schedulantApi: b
         });
         break;
       }
@@ -1428,7 +1428,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
     f.preventDefault();
     const y = r.current, S = t.timelineEventHarnessRef.current;
     if (y && S) {
-      const { deltaX: M } = l(f.clientX), D = s.current + M, T = i.current - M;
+      const { deltaX: b } = l(f.clientX), D = s.current + b, T = i.current - b;
       switch (o.current) {
         case "press_event":
           S.style.left = w(D), S.style.right = w(T);
@@ -1447,26 +1447,26 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
     [h]
   ), A = C((f, y) => {
     f.preventDefault();
-    const S = t.schedulantApi.getSchedulantElRef().current, M = t.timelineEventHarnessRef.current;
-    M && S ? (r.current = !0, o.current = y, n.current = f.clientX, s.current = oe(M.style.left), i.current = oe(M.style.right), c(M), S.addEventListener("mousemove", u)) : (console.error("scheduleEl", S), console.error("timelineEventHarness", M));
+    const S = t.schedulantApi.getSchedulantElRef().current, b = t.timelineEventHarnessRef.current;
+    b && S ? (r.current = !0, o.current = y, n.current = f.clientX, s.current = oe(b.style.left), i.current = oe(b.style.right), c(b), S.addEventListener("mousemove", u)) : (console.error("scheduleEl", S), console.error("timelineEventHarness", b));
   }, [t.schedulantApi, t.timelineEventHarnessRef, c, u]), p = C((f) => {
     A(f, "press_event");
   }, [A]), v = C((f) => {
     A(f, "press_event_left");
-  }, [A]), b = C((f) => {
+  }, [A]), M = C((f) => {
     A(f, "press_event_right");
   }, [A]);
   return N(() => {
     const f = t.timelineEventHarnessRef.current, y = t.schedulantApi.getSchedulantElRef().current;
     if (y && f) {
-      const S = (M) => {
-        M.preventDefault(), r.current && (d(f), g(f, M.clientX), y.removeEventListener("mousemove", u), r.current = !1, o.current = "none");
+      const S = (b) => {
+        b.preventDefault(), r.current && (d(f), g(f, b.clientX), y.removeEventListener("mousemove", u), r.current = !1, o.current = "none");
       };
       return document.addEventListener("mouseup", S), () => {
         document.removeEventListener("mouseup", S), y.removeEventListener("mousemove", u), u.cancel();
       };
     }
-  }, [u, t, d, g]), { handleMouseDown: p, leftHandleMouseDown: v, rightHandleMouseDown: b };
+  }, [u, t, d, g]), { handleMouseDown: p, leftHandleMouseDown: v, rightHandleMouseDown: M };
 }, nt = (t) => /* @__PURE__ */ a(X, { component: () => /* @__PURE__ */ a(
   "svg",
   {
@@ -1534,8 +1534,8 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
       trigger: ["contextMenu"],
       menu: {
         items: t.schedulantApi.getEventContextMenuItems(),
-        onClick: (b) => {
-          const { key: f, keyPath: y, domEvent: S } = b;
+        onClick: (M) => {
+          const { key: f, keyPath: y, domEvent: S } = M;
           t.schedulantApi.onEventContextMenuClick({
             key: f,
             keyPath: y,
@@ -1556,11 +1556,11 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
           ref: e,
           children: [
             /* @__PURE__ */ a(
-              H,
+              z,
               {
                 condition: t.schedulantApi.isEditable(),
                 fallback: /* @__PURE__ */ a(
-                  H,
+                  z,
                   {
                     condition: t.eventApi.getStart().isBefore(s.getStart()),
                     fallback: /* @__PURE__ */ a("div", { style: { width: W, height: d } }),
@@ -1568,7 +1568,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
                   }
                 ),
                 children: /* @__PURE__ */ a(
-                  H,
+                  z,
                   {
                     condition: !t.eventApi.getStart().isBefore(s.getStart()),
                     fallback: /* @__PURE__ */ a(nt, { width: W, height: d, color: "#FFFFFF" }),
@@ -1586,7 +1586,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
               }
             ),
             /* @__PURE__ */ a(
-              H,
+              z,
               {
                 condition: t.schedulantApi.isEditable() && !t.eventApi.getStart().isBefore(s.getStart()) && t.eventApi.getEnd().isSameOrBefore(s.getEnd()),
                 fallback: /* @__PURE__ */ a(
@@ -1595,7 +1595,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
                     className: "schedulant-event-main",
                     style: { color: r, width: `calc(100% - ${W * 2}px)` },
                     children: /* @__PURE__ */ a(
-                      H,
+                      z,
                       {
                         condition: t.eventApi.getUrl().isDefined(),
                         fallback: /* @__PURE__ */ a("span", { children: t.eventApi.getTitle() }),
@@ -1618,7 +1618,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
                     style: { color: r, width: `calc(100% - ${W * 2}px)`, cursor: "grab" },
                     onMouseDown: A,
                     children: /* @__PURE__ */ a(
-                      H,
+                      z,
                       {
                         condition: t.eventApi.getUrl().isDefined(),
                         fallback: /* @__PURE__ */ a("span", { children: t.eventApi.getTitle() }),
@@ -1637,11 +1637,11 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
               }
             ),
             /* @__PURE__ */ a(
-              H,
+              z,
               {
                 condition: t.schedulantApi.isEditable(),
                 fallback: /* @__PURE__ */ a(
-                  H,
+                  z,
                   {
                     condition: t.eventApi.getEnd().isAfter(s.getEnd()),
                     fallback: /* @__PURE__ */ a("div", { style: { width: W, height: d } }),
@@ -1649,7 +1649,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
                   }
                 ),
                 children: /* @__PURE__ */ a(
-                  H,
+                  z,
                   {
                     condition: t.eventApi.getEnd().isSameOrBefore(s.getEnd()),
                     fallback: /* @__PURE__ */ a(it, { width: W, height: d, color: "#FFFFFF" }),
@@ -1696,37 +1696,37 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
   }, [e, n, t, i, r, o]), { isPast: i, isFuture: r, isProcess: o };
 }, yt = (t) => {
   const e = F(() => "schedulant-timeline-marker-position-guide", []), n = k(0), s = k(0), i = k(0), r = k(!1), o = C((p) => {
-    const v = p.style.left, b = p.style.right, f = t.schedulantApi.getScheduleView().getTimelineView(), y = t.milestoneApi?.getResourceApi() ?? t.checkpointApi?.getResourceApi(), S = f.calculateLaneHeight(y), M = document.createElement("div");
-    M.className = e, Object.assign(M.style, {
+    const v = p.style.left, M = p.style.right, f = t.schedulantApi.getScheduleView().getTimelineView(), y = t.milestoneApi?.getResourceApi() ?? t.checkpointApi?.getResourceApi(), S = f.calculateLaneHeight(y), b = document.createElement("div");
+    b.className = e, Object.assign(b.style, {
       position: "absolute",
       zIndex: 1,
       left: v,
-      right: b,
+      right: M,
       height: w(S),
       backgroundColor: t.schedulantApi.getDragHintColor()
-    }), p.parentNode?.insertBefore(M, p);
+    }), p.parentNode?.insertBefore(b, p);
   }, [t, e]), l = C((p) => {
     const v = p.previousElementSibling;
     v?.className === e && p.parentElement?.removeChild(v);
   }, [e]), c = C((p) => {
-    const f = t.schedulantApi.getScheduleView().getTimelineView(), y = p - n.current, S = t.timelineWidth, M = f.getTotalSlots(), D = Math.round(y / S * M), T = D / M * t.timelineWidth;
+    const f = t.schedulantApi.getScheduleView().getTimelineView(), y = p - n.current, S = t.timelineWidth, b = f.getTotalSlots(), D = Math.round(y / S * b), T = D / b * t.timelineWidth;
     return {
       moveSlots: D,
       distance: T,
       deltaX: y,
       totalWidth: S,
-      totalSlots: M
+      totalSlots: b
     };
   }, [t]), d = C((p, v) => {
-    const b = p.previousElementSibling;
-    if (b && b.className === e) {
+    const M = p.previousElementSibling;
+    if (M && M.className === e) {
       const { distance: f } = c(v);
-      b.style.left = w(Math.max(s.current + f, 0)), b.style.right = w(i.current - f);
+      M.style.left = w(Math.max(s.current + f, 0)), M.style.right = w(i.current - f);
     }
   }, [e, c]), m = C((p, v) => {
-    const { moveSlots: b, distance: f } = c(v);
+    const { moveSlots: M, distance: f } = c(v);
     if (p.style.left = w(Math.max(s.current + f, 0)), p.style.right = w(i.current - f), t.milestoneApi) {
-      const y = t.milestoneApi.getTime().add(b, "day");
+      const y = t.milestoneApi.getTime().add(M, "day");
       t.schedulantApi.milestoneMove({
         el: p,
         date: y,
@@ -1734,7 +1734,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
         milestoneApi: t.milestoneApi
       });
     } else if (t.checkpointApi) {
-      const y = t.checkpointApi.getTime().add(b, "day");
+      const y = t.checkpointApi.getTime().add(M, "day");
       t.schedulantApi.checkpointMove({
         el: p,
         date: y,
@@ -1745,8 +1745,8 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
     n.current = 0;
   }, [t, c]), g = C((p) => {
     p.preventDefault();
-    const v = t.markerRef.current, b = r.current;
-    if (v && b) {
+    const v = t.markerRef.current, M = r.current;
+    if (v && M) {
       const f = p.clientX - n.current, y = s.current + f, S = i.current - f;
       v.style.left = w(y), v.style.right = w(S), d(v, p.clientX);
     }
@@ -1755,23 +1755,23 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
     [g]
   ), u = C((p) => {
     p.preventDefault();
-    const v = t.markerRef.current, b = r.current, f = t.schedulantApi.getSchedulantElRef().current;
-    b && f && v && (l(v), m(v, p.clientX), f.removeEventListener("mousemove", h), r.current = !1);
+    const v = t.markerRef.current, M = r.current, f = t.schedulantApi.getSchedulantElRef().current;
+    M && f && v && (l(v), m(v, p.clientX), f.removeEventListener("mousemove", h), r.current = !1);
   }, [h, t.markerRef, t.schedulantApi, l, m]), A = C((p) => {
     p.preventDefault();
-    const v = t.schedulantApi.getSchedulantElRef().current, b = t.markerRef.current;
-    v && b && (r.current = !0, n.current = p.clientX, s.current = oe(b.style.left), i.current = oe(b.style.right), o(b), v.addEventListener("mousemove", h));
+    const v = t.schedulantApi.getSchedulantElRef().current, M = t.markerRef.current;
+    v && M && (r.current = !0, n.current = p.clientX, s.current = oe(M.style.left), i.current = oe(M.style.right), o(M), v.addEventListener("mousemove", h));
   }, [o, h, t.markerRef, t.schedulantApi]);
   return N(() => {
     const p = t.schedulantApi.getSchedulantElRef().current, v = t.markerRef.current;
     if (p && v) {
-      const b = v.parentElement?.parentElement;
-      if (b) {
+      const M = v.parentElement?.parentElement;
+      if (M) {
         const f = (y) => {
-          y.preventDefault(), r.current && !b.contains(y.relatedTarget) && (l(v), m(v, y.clientX), p.removeEventListener("mousemove", h), r.current = !1);
+          y.preventDefault(), r.current && !M.contains(y.relatedTarget) && (l(v), m(v, y.clientX), p.removeEventListener("mousemove", h), r.current = !1);
         };
-        return b.addEventListener("mouseup", f), b.addEventListener("mouseout", f), () => {
-          b.removeEventListener("mouseup", f), b.removeEventListener("mouseout", f), p.removeEventListener("mousemove", h), h.cancel();
+        return M.addEventListener("mouseup", f), M.addEventListener("mouseout", f), () => {
+          M.removeEventListener("mouseup", f), M.removeEventListener("mouseout", f), p.removeEventListener("mousemove", h), h.cancel();
         };
       }
     }
@@ -1826,11 +1826,11 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
       menu: {
         items: t.schedulantApi.getMilestoneContextMenuItems(),
         onClick: (A) => {
-          const { key: p, keyPath: v, domEvent: b } = A;
+          const { key: p, keyPath: v, domEvent: M } = A;
           t.schedulantApi.onMilestoneContextMenuClick({
             key: p,
             keyPath: v,
-            domEvent: b,
+            domEvent: M,
             isPast: c,
             isFuture: d,
             isProcess: m,
@@ -1845,7 +1845,7 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
           className: `schedulant-timeline-milestone${m ? " schedulant-milestone-today" : ""}`,
           style: m ? { "--milestone-glow-color": g } : void 0,
           ref: e,
-          children: /* @__PURE__ */ a("div", { className: "schedulant-milestone-main", children: /* @__PURE__ */ a(Ln, { width: o * ze, height: o * ze, color: g }) })
+          children: /* @__PURE__ */ a("div", { className: "schedulant-milestone-main", children: /* @__PURE__ */ a(Ln, { width: o * He, height: o * He, color: g }) })
         }
       )
     }
@@ -1934,11 +1934,11 @@ const pt = /* @__PURE__ */ yn(xn), On = (t) => {
           menu: {
             items: t.schedulantApi.getCheckpointContextMenuItems(),
             onClick: (A) => {
-              const { key: p, keyPath: v, domEvent: b } = A;
+              const { key: p, keyPath: v, domEvent: M } = A;
               t.schedulantApi.onCheckpointContextMenuClick({
                 key: p,
                 keyPath: v,
-                domEvent: b,
+                domEvent: M,
                 isPast: d,
                 isFuture: m,
                 isProcess: g,
@@ -2023,7 +2023,7 @@ class J {
 const ee = (t) => {
   const { dates: e, minWidth: n } = t;
   return /* @__PURE__ */ a("colgroup", { children: e.map((s) => /* @__PURE__ */ a("col", { style: { minWidth: n } }, s.format("YYYY-MM-DD"))) });
-}, Hn = (t, e, n) => {
+}, zn = (t, e, n) => {
   const s = n.isBefore(E(), "day"), i = n.isAfter(E(), "day"), r = n.isSame(E(), "day");
   N(() => {
     const o = t.current;
@@ -2050,7 +2050,7 @@ const ee = (t) => {
   }, [n, i, s, r, e, t]);
 }, te = ae((t) => {
   const e = k(null);
-  return Hn(e, t.schedulantApi, t.date), /* @__PURE__ */ a(
+  return zn(e, t.schedulantApi, t.date), /* @__PURE__ */ a(
     "td",
     {
       ref: e,
@@ -2060,7 +2060,7 @@ const ee = (t) => {
     },
     t.date.format("YYYY-MM-DD")
   );
-}), zn = (t, e, n, s, i) => {
+}), Hn = (t, e, n, s, i) => {
   const r = n.isBefore(E(), "day"), o = n.isAfter(E(), "day"), l = n.isSame(E(), "day");
   N(() => {
     const c = t.current;
@@ -2091,7 +2091,7 @@ const ee = (t) => {
   }, [n, o, r, l, s, e, i, t]);
 }, B = (t) => {
   const e = k(null);
-  return zn(e, t.schedulantApi, t.date, t.level, t.timeText), /* @__PURE__ */ a(
+  return Hn(e, t.schedulantApi, t.date, t.level, t.timeText), /* @__PURE__ */ a(
     "th",
     {
       ref: e,
@@ -2303,7 +2303,7 @@ class Bn extends J {
     ] });
   }
   calculatePosition(e, n, s) {
-    const i = this.getTimelineApi(), r = i.getQuarters(), o = e / r.length, l = n.isBefore(i.getStart()) ? i.getStart() : n, c = s.isAfter(i.getEnd()) ? i.getEnd() : s, d = l.endOf("quarter").diff(l.startOf("quarter"), "day") + 1, m = n.diff(l.startOf("quarter"), "day"), g = o / d, h = m * g, u = i.getQuarterPosition(l) * o, A = n.isSameOrBefore(i.getStart(), "day") ? u : u + h, p = c.endOf("quarter").diff(c.startOf("quarter"), "day") + 1, v = c.endOf("quarter").diff(c, "day"), b = o / p, f = v * b, y = (i.getQuarterPosition(c) + 1) * o * -1, S = s.isBefore(i.getEnd(), "day") ? y + f : y;
+    const i = this.getTimelineApi(), r = i.getQuarters(), o = e / r.length, l = n.isBefore(i.getStart()) ? i.getStart() : n, c = s.isAfter(i.getEnd()) ? i.getEnd() : s, d = l.endOf("quarter").diff(l.startOf("quarter"), "day") + 1, m = n.diff(l.startOf("quarter"), "day"), g = o / d, h = m * g, u = i.getQuarterPosition(l) * o, A = n.isSameOrBefore(i.getStart(), "day") ? u : u + h, p = c.endOf("quarter").diff(c.startOf("quarter"), "day") + 1, v = c.endOf("quarter").diff(c, "day"), M = o / p, f = v * M, y = (i.getQuarterPosition(c) + 1) * o * -1, S = s.isBefore(i.getEnd(), "day") ? y + f : y;
     return { left: A, right: S };
   }
 }
@@ -2387,7 +2387,7 @@ class Un extends J {
     )) }) });
   }
   calculatePosition(e, n, s) {
-    const i = this.getTimelineApi(), r = i.getYears(), o = e / r.length, l = n.isBefore(i.getStart()) ? i.getStart() : n, c = s.isAfter(i.getEnd()) ? i.getEnd() : s, d = l.endOf("year").diff(l.startOf("year"), "day") + 1, m = l.diff(l.startOf("year"), "day"), g = o / d, h = m * g, u = i.getYearPosition(l) * o, A = n.isSameOrBefore(i.getStart(), "day") ? u : u + h, p = c.endOf("year").diff(c.startOf("year"), "day") + 1, v = c.endOf("year").diff(c, "day"), b = o / p, f = v * b, y = (i.getYearPosition(c) + 1) * o * -1, S = s.isBefore(i.getEnd(), "day") ? y + f : y;
+    const i = this.getTimelineApi(), r = i.getYears(), o = e / r.length, l = n.isBefore(i.getStart()) ? i.getStart() : n, c = s.isAfter(i.getEnd()) ? i.getEnd() : s, d = l.endOf("year").diff(l.startOf("year"), "day") + 1, m = l.diff(l.startOf("year"), "day"), g = o / d, h = m * g, u = i.getYearPosition(l) * o, A = n.isSameOrBefore(i.getStart(), "day") ? u : u + h, p = c.endOf("year").diff(c.startOf("year"), "day") + 1, v = c.endOf("year").diff(c, "day"), M = o / p, f = v * M, y = (i.getYearPosition(c) + 1) * o * -1, S = s.isBefore(i.getEnd(), "day") ? y + f : y;
     return { left: A, right: S };
   }
 }
@@ -2559,7 +2559,7 @@ const Kn = (t, e) => {
       r.current !== null && (r.current = null, i.current = null, s((y) => ({ ...y, overId: null, dropPosition: null })));
       return;
     }
-    const b = A.clientY + p.y, f = Xn(b, {
+    const M = A.clientY + p.y, f = Xn(M, {
       top: u.rect.top,
       height: u.rect.height
     });
@@ -2597,28 +2597,28 @@ const Kn = (t, e) => {
   x: t.x + 20,
   y: t.y + 20
 } : t, Jn = (t) => {
-  const { schedulantView: e, virtualizer: n, visibleResources: s, collapseIds: i, cellResizerMouseUp: r, cellResizerMouseDownFunc: o } = t, l = e.getScheduleApi(), c = l.getFlatMapResourceApis(), d = C(async (M, D, T, I) => {
-    const P = c.find((z) => z.getId() === D), Y = c.find((z) => z.getId() === T);
+  const { schedulantView: e, virtualizer: n, visibleResources: s, collapseIds: i, cellResizerMouseUp: r, cellResizerMouseDownFunc: o } = t, l = e.getScheduleApi(), c = l.getFlatMapResourceApis(), d = C(async (b, D, T, I) => {
+    const P = c.find((H) => H.getId() === D), Y = c.find((H) => H.getId() === T);
     if (P && Y) {
-      const z = P.getParent();
+      const H = P.getParent();
       l.resourceLaneMove({
-        el: M,
+        el: b,
         schedulantApi: l,
         draggedResourceApi: P,
         targetResourceApi: Y,
         position: I,
-        oldParentResourceApi: z.isDefined() ? z.get() : void 0
+        oldParentResourceApi: H.isDefined() ? H.get() : void 0
       });
     }
   }, [l, c]), { dragState: m, handleDragStart: g, handleDragMove: h, handleDragEnd: u, handleDragCancel: A } = Kn(c, d), p = Nt(
     _e(Yt, { activationConstraint: { delay: 300, tolerance: 5 } }),
     _e(_t)
-  ), v = s.map((M) => M.getId()), b = l.isEditable(), f = n.getVirtualItems(), y = n.getTotalSize(), S = F(() => m.activeId ? c.find((M) => M.getId() === String(m.activeId)) ?? null : null, [m.activeId, c]);
+  ), v = s.map((b) => b.getId()), M = l.isEditable(), f = n.getVirtualItems(), y = n.getTotalSize(), S = F(() => m.activeId ? c.find((b) => b.getId() === String(m.activeId)) ?? null : null, [m.activeId, c]);
   return /* @__PURE__ */ O(
     Wt,
     {
       sensors: p,
-      collisionDetection: Ht,
+      collisionDetection: zt,
       modifiers: [Vt],
       onDragStart: g,
       onDragMove: h,
@@ -2634,13 +2634,13 @@ const Kn = (t, e) => {
             children: [
               e.renderResourceTableColgroup(),
               e.renderResourceLane(s, f, y, i, r, o, {
-                isDraggable: b,
+                isDraggable: M,
                 dragState: m
               })
             ]
           }
         ) }),
-        /* @__PURE__ */ a(zt, { dropAnimation: null, modifiers: [Zn], children: S ? /* @__PURE__ */ a("div", { className: "schedulant-drag-overlay", children: S.getTitle() }) : null })
+        /* @__PURE__ */ a(Ht, { dropAnimation: null, modifiers: [Zn], children: S ? /* @__PURE__ */ a("div", { className: "schedulant-drag-overlay", children: S.getTitle() }) : null })
       ]
     }
   );
@@ -2648,31 +2648,22 @@ const Kn = (t, e) => {
   t.schedulantView.renderTimelineTableColgroup(),
   t.schedulantView.renderTimelineBodyTableSlots()
 ] }) }), ts = () => {
-  const t = C(() => {
-    const l = document.getElementsByClassName("schedulant-timeline-head").item(0).getElementsByTagName("table").item(0)?.offsetWidth;
-    return l || 0;
-  }, []), [e, n] = re(0), { state: s } = Te();
+  const [t, e] = re(0), { state: n } = Te();
   return Et(() => {
-    const i = () => {
-      const d = t();
-      n(d);
+    const r = document.getElementsByClassName("schedulant-timeline-head").item(0)?.getElementsByTagName("table").item(0);
+    if (!r) return;
+    const o = () => {
+      const c = r.offsetWidth;
+      e((d) => d !== c ? c : d);
     };
-    i();
-    const r = () => i();
-    window.addEventListener("resize", r);
-    const l = document.getElementsByClassName("schedulant-timeline-head").item(0);
-    let c = null;
-    return l && (c = new MutationObserver(() => {
-      requestAnimationFrame(i);
-    }), c.observe(l, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0,
-      attributeFilter: ["style", "class"]
-    })), () => {
-      window.removeEventListener("resize", r), c?.disconnect();
+    o();
+    const l = new ResizeObserver(() => {
+      o();
+    });
+    return l.observe(r), window.addEventListener("resize", o), () => {
+      l.disconnect(), window.removeEventListener("resize", o);
     };
-  }, [t, s.resourceAreaWidth]), e;
+  }, [n.resourceAreaWidth]), t;
 }, ns = (t) => {
   const e = ts(), n = t.virtualizer.getVirtualItems(), s = t.virtualizer.getTotalSize();
   return /* @__PURE__ */ a(
@@ -2711,13 +2702,13 @@ function $(t, e, n) {
     s = g;
     let u;
     if (n.key && ((c = n.debug) != null && c.call(n)) && (u = Date.now()), i = e(...g), n.key && ((d = n.debug) != null && d.call(n))) {
-      const A = Math.round((Date.now() - m) * 100) / 100, p = Math.round((Date.now() - u) * 100) / 100, v = p / 16, b = (f, y) => {
+      const A = Math.round((Date.now() - m) * 100) / 100, p = Math.round((Date.now() - u) * 100) / 100, v = p / 16, M = (f, y) => {
         for (f = String(f); f.length < y; )
           f = " " + f;
         return f;
       };
       console.info(
-        `%c⏱ ${b(p, 5)} /${b(A, 5)} ms`,
+        `%c⏱ ${M(p, 5)} /${M(A, 5)} ms`,
         `
             font-size: .6rem;
             font-weight: bold;
@@ -2994,13 +2985,13 @@ class hs {
           let p, v;
           if (A !== void 0 && this.options.lanes > 1) {
             p = A;
-            const S = g[p], M = S !== void 0 ? m[S] : void 0;
-            v = M ? M.end + this.options.gap : s + i;
+            const S = g[p], b = S !== void 0 ? m[S] : void 0;
+            v = b ? b.end + this.options.gap : s + i;
           } else {
             const S = this.options.lanes === 1 ? m[h - 1] : this.getFurthestMeasurement(m, h);
             v = S ? S.end + this.options.gap : s + i, p = S ? S.lane : h % this.options.lanes, this.options.lanes > 1 && this.laneAssignments.set(h, p);
           }
-          const b = c.get(u), f = typeof b == "number" ? b : this.options.estimateSize(h), y = v + f;
+          const M = c.get(u), f = typeof M == "number" ? M : this.options.estimateSize(h), y = v + f;
           m[h] = {
             index: h,
             start: v,
@@ -3356,17 +3347,17 @@ const ys = (t, e, n, s) => {
     slotMinWidth: A,
     schedulantMaxHeight: p,
     schedulantViewType: v,
-    events: b,
+    events: M,
     resources: f,
     milestones: y,
     checkpoints: S,
-    resourceAreaColumns: M,
+    resourceAreaColumns: b,
     resourceAreaWidth: D,
     companyHolidays: T,
     specialWorkdays: I,
     nationalHolidays: P,
     dragHintColor: Y,
-    selectionColor: z
+    selectionColor: H
   } = t, _ = F(
     () => new jn(t, s),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3379,17 +3370,17 @@ const ys = (t, e, n, s) => {
       A,
       p,
       v,
-      b,
+      M,
       f,
       y,
       S,
-      M,
+      b,
       D,
       T,
       I,
       P,
       Y,
-      z
+      H
     ]
   ), R = F(() => _.getScheduleApi(), [_]);
   R.updateProps(t);

package/package.json

@@ -7,7 +7,7 @@
   ],
   "license": "MIT",
   "author": "mengen.dai@outlook.com",
-  "version": "2.0.9-fixed.3",
+  "version": "2.1.0",
   "main": "dist/schedulant.js",
   "typings": "dist/schedulant.d.ts",
   "keywords": [