@wandelbots/wandelbots-js-react-components 2.40.0 → 2.41.0

package/dist/index.js

@@ -2,7 +2,7 @@ var Og = Object.defineProperty;
 var Cg = (e, t, r) => t in e ? Og(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var Hn = (e, t, r) => Cg(e, typeof t != "symbol" ? t + "" : t, r);
 import * as B from "react";
-import Xt, { useState as Fe, useRef as Ee, useCallback as je, useEffect as ze, useMemo as _o, forwardRef as et, Suspense as Xh, lazy as Pg } from "react";
+import Xt, { useState as Fe, useRef as Ee, useCallback as je, useEffect as Be, useMemo as _o, forwardRef as et, Suspense as Xh, lazy as Pg } from "react";
 import * as xe from "three";
 import { Vector3 as Fo, Matrix4 as qn, Quaternion as Tg } from "three";
 import { ConvexGeometry as Zh } from "three-stdlib";
@@ -1504,7 +1504,7 @@ function zo(e, t, r, n = r) {
   let a;
   return typeof e == "function" ? a = e(r) : Array.isArray(e) ? a = e[r] || n : a = gs(e, r) || n, t && (a = t(a, n, e)), a;
 }
-function Be(e) {
+function Ne(e) {
   const {
     prop: t,
     cssProperty: r = e.prop,
@@ -1619,7 +1619,7 @@ function St(e) {
   return typeof e != "number" ? e : `${e}px solid`;
 }
 function Pt(e, t) {
-  return Be({
+  return Ne({
     prop: e,
     themeKey: "borders",
     transform: t
@@ -1678,39 +1678,39 @@ Cs.propTypes = process.env.NODE_ENV !== "production" ? {
   rowGap: Sr
 } : {};
 Cs.filterProps = ["rowGap"];
-const Ry = Be({
+const Ry = Ne({
   prop: "gridColumn"
-}), Ay = Be({
+}), Ay = Ne({
   prop: "gridRow"
-}), _y = Be({
+}), _y = Ne({
   prop: "gridAutoFlow"
-}), Ey = Be({
+}), Ey = Ne({
   prop: "gridAutoColumns"
-}), Iy = Be({
+}), Iy = Ne({
   prop: "gridAutoRows"
-}), Vy = Be({
+}), Vy = Ne({
   prop: "gridTemplateColumns"
-}), My = Be({
+}), My = Ne({
   prop: "gridTemplateRows"
-}), jy = Be({
+}), jy = Ne({
   prop: "gridTemplateAreas"
-}), $y = Be({
+}), $y = Ne({
   prop: "gridArea"
 });
 vs(ws, Os, Cs, Ry, Ay, _y, Ey, Iy, Vy, My, jy, $y);
 function xn(e, t) {
   return t === "grey" ? t : e;
 }
-const ky = Be({
+const ky = Ne({
   prop: "color",
   themeKey: "palette",
   transform: xn
-}), Uy = Be({
+}), Uy = Ne({
   prop: "bgcolor",
   cssProperty: "backgroundColor",
   themeKey: "palette",
   transform: xn
-}), Dy = Be({
+}), Dy = Ne({
   prop: "backgroundColor",
   themeKey: "palette",
   transform: xn
@@ -1719,7 +1719,7 @@ vs(ky, Uy, Dy);
 function yt(e) {
   return e <= 1 && e !== 0 ? `${e * 100}%` : e;
 }
-const Ly = Be({
+const Ly = Ne({
   prop: "width",
   transform: yt
 }), Dl = (e) => {
@@ -1740,30 +1740,30 @@ const Ly = Be({
   return null;
 };
 Dl.filterProps = ["maxWidth"];
-const Fy = Be({
+const Fy = Ne({
   prop: "minWidth",
   transform: yt
-}), By = Be({
+}), By = Ne({
   prop: "height",
   transform: yt
-}), Ny = Be({
+}), Ny = Ne({
   prop: "maxHeight",
   transform: yt
-}), zy = Be({
+}), zy = Ne({
   prop: "minHeight",
   transform: yt
 });
-Be({
+Ne({
   prop: "size",
   cssProperty: "width",
   transform: yt
 });
-Be({
+Ne({
   prop: "size",
   cssProperty: "height",
   transform: yt
 });
-const Gy = Be({
+const Gy = Ne({
   prop: "boxSizing"
 });
 vs(Ly, Dl, Fy, By, Ny, zy, Gy);
@@ -12251,7 +12251,7 @@ const nP = ({
     l.remainingTime,
     l.currentState
   ]), R = je(() => l.isPausedState, [l.isPausedState]);
-  return ze(() => {
+  return Be(() => {
     n ? (l.isRunning && !l.isPausedState && (c((O) => ({ ...O, wasRunningBeforeError: !0 })), w()), o()) : (l.wasRunningBeforeError && l.isPausedState && (c((O) => ({ ...O, wasRunningBeforeError: !1 })), C()), s());
   }, [
     n,
@@ -12262,7 +12262,7 @@ const nP = ({
     C,
     o,
     s
-  ]), ze(() => {
+  ]), Be(() => {
     if (l.isRunning) {
       const O = () => {
         if (d.current) {
@@ -12312,7 +12312,7 @@ const nP = ({
     l.currentState,
     l.maxTime,
     p
-  ]), ze(() => {
+  ]), Be(() => {
     let O = null;
     const P = () => {
       p.update(1 / 60), O = requestAnimationFrame(P);
@@ -12367,7 +12367,7 @@ const nP = ({
         onClearErrorAnimation: h,
         onStartPulsating: p
       });
-      return ze(() => {
+      return Be(() => {
         const O = l.current;
         l.current !== void 0 && O !== C.currentState ? (O === "measured" && f(), O === "idle" && b(), S()) : A(), C.currentState === "idle" && m(), l.current = C.currentState;
       }, [
@@ -12377,7 +12377,7 @@ const nP = ({
         m,
         S,
         A
-      ]), ze(() => {
+      ]), Be(() => {
         let O = !0;
         const P = setTimeout(() => {
           O && e(R);
@@ -12385,7 +12385,7 @@ const nP = ({
         return () => {
           O = !1, clearTimeout(P);
         };
-      }, [e, R]), ze(() => w, [w]), a === "small" ? /* @__PURE__ */ g.jsx(
+      }, [e, R]), Be(() => w, [w]), a === "small" ? /* @__PURE__ */ g.jsx(
         eP,
         {
           timerState: C,
@@ -12704,14 +12704,14 @@ const lP = Or(/* @__PURE__ */ g.jsx("path", {
     }) => {
       var _;
       const p = Le(), f = a0(), m = Ee(null), [b, S] = Fe(null), A = _o(() => e.map(r), [e, r]);
-      ze(() => {
+      Be(() => {
         f.current && A.length > 0 && f.current.autosizeColumns({
           includeOutliers: !0,
           includeHeaders: !0,
           expand: !0,
           columns: t.map((I) => I.field)
         });
-      }, [A, t, f]), ze(() => {
+      }, [A, t, f]), Be(() => {
         if (!m.current || !f.current) return;
         const I = new ResizeObserver(() => {
           setTimeout(() => {
@@ -13267,7 +13267,7 @@ const dP = ({
   ...r
 }, n) => /* @__PURE__ */ B.createElement("svg", { width: 21, height: 21, viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: n, "aria-labelledby": t, ...r }, e ? /* @__PURE__ */ B.createElement("title", { id: t }, e) : null, /* @__PURE__ */ B.createElement("g", { id: "JogPlus" }, /* @__PURE__ */ B.createElement("g", { id: "Plus" }, /* @__PURE__ */ B.createElement("path", { d: "M0 13V8H8V13H0Z", fill: "white" }), /* @__PURE__ */ B.createElement("path", { d: "M8 0L13 2.18557e-07L13 21H8L8 0Z", fill: "white" }), /* @__PURE__ */ B.createElement("path", { d: "M13 13V8H21V13H13Z", fill: "white" })))), mP = et(pP);
 function Ac(e) {
-  ze(e, []);
+  Be(e, []);
 }
 function fP(e) {
   Ac(() => op(e));
@@ -13304,7 +13304,7 @@ const Ed = tt(
         T && (T.textContent = y);
       });
       const l = Le(), [c, u] = Fe(null);
-      ze(() => {
+      Be(() => {
         o && A();
       }, [o]);
       const d = s || c, h = Ee(null);
@@ -28235,7 +28235,7 @@ function mV(e) {
 }
 const zf = (e) => {
   const t = e.softTimeout || 3e3, [r, n] = Fe(!1), a = Le();
-  return ze(() => {
+  return Be(() => {
     const o = setTimeout(() => {
       n(!0);
     }, t);
@@ -30633,7 +30633,7 @@ const cj = xt("span", {
     ...Q,
     rootRef: r
   });
-  Q.marked = W.length > 0 && W.some((Ne) => Ne.label), Q.dragging = le, Q.focusedThumbIndex = K;
+  Q.marked = W.length > 0 && W.some((ze) => ze.label), Q.dragging = le, Q.focusedThumbIndex = K;
   const ke = dj(Q), lr = (z == null ? void 0 : z.root) ?? c.Root ?? oj, Ja = (z == null ? void 0 : z.rail) ?? c.Rail ?? sj, Ya = (z == null ? void 0 : z.track) ?? c.Track ?? ij, Ka = (z == null ? void 0 : z.thumb) ?? c.Thumb ?? lj, Qa = (z == null ? void 0 : z.valueLabel) ?? c.ValueLabel ?? cg, Qr = (z == null ? void 0 : z.mark) ?? c.Mark ?? cj, Xa = (z == null ? void 0 : z.markLabel) ?? c.MarkLabel ?? uj, Y = (z == null ? void 0 : z.input) ?? c.Input ?? "input", Z = (V == null ? void 0 : V.root) ?? u.root, oe = (V == null ? void 0 : V.rail) ?? u.rail, fe = (V == null ? void 0 : V.track) ?? u.track, Oe = (V == null ? void 0 : V.thumb) ?? u.thumb, se = (V == null ? void 0 : V.valueLabel) ?? u.valueLabel, Ye = (V == null ? void 0 : V.mark) ?? u.mark, ot = (V == null ? void 0 : V.markLabel) ?? u.markLabel, Ge = (V == null ? void 0 : V.input) ?? u.input, vt = hr({
     elementType: lr,
     getSlotProps: Re,
@@ -30707,10 +30707,10 @@ const cj = xt("span", {
       ...Gn
     }), /* @__PURE__ */ g.jsx(Ya, {
       ...vg
-    }), W.filter((Ne) => Ne.value >= C && Ne.value <= w).map((Ne, Xe) => {
-      const ci = hs(Ne.value, C, w), Za = de[ye].offset(ci);
+    }), W.filter((ze) => ze.value >= C && ze.value <= w).map((ze, Xe) => {
+      const ci = hs(ze.value, C, w), Za = de[ye].offset(ci);
       let qt;
-      return ee === !1 ? qt = be.includes(Ne.value) : qt = ee === "normal" && (ae ? Ne.value >= be[0] && Ne.value <= be[be.length - 1] : Ne.value <= be[0]) || ee === "inverted" && (ae ? Ne.value <= be[0] || Ne.value >= be[be.length - 1] : Ne.value >= be[0]), /* @__PURE__ */ g.jsxs(B.Fragment, {
+      return ee === !1 ? qt = be.includes(ze.value) : qt = ee === "normal" && (ae ? ze.value >= be[0] && ze.value <= be[be.length - 1] : ze.value <= be[0]) || ee === "inverted" && (ae ? ze.value <= be[0] || ze.value >= be[be.length - 1] : ze.value >= be[0]), /* @__PURE__ */ g.jsxs(B.Fragment, {
         children: [/* @__PURE__ */ g.jsx(Qr, {
           "data-index": Xe,
           ...ii,
@@ -30722,7 +30722,7 @@ const cj = xt("span", {
             ...ii.style
           },
           className: Et(ii.className, qt && ke.markActive)
-        }), Ne.label != null ? /* @__PURE__ */ g.jsx(Xa, {
+        }), ze.label != null ? /* @__PURE__ */ g.jsx(Xa, {
           "aria-hidden": !0,
           "data-index": Xe,
           ...li,
@@ -30734,18 +30734,18 @@ const cj = xt("span", {
             ...li.style
           },
           className: Et(ke.markLabel, li.className, qt && ke.markLabelActive),
-          children: Ne.label
+          children: ze.label
         }) : null]
       }, Xe);
-    }), be.map((Ne, Xe) => {
-      const ci = hs(Ne, C, w), Za = de[ye].offset(ci), qt = X === "off" ? hj : Qa;
+    }), be.map((ze, Xe) => {
+      const ci = hs(ze, C, w), Za = de[ye].offset(ci), qt = X === "off" ? hj : Qa;
       return (
         /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
         /* @__PURE__ */ g.jsx(qt, {
           ...!Lo(qt) && {
             valueLabelFormat: ie,
             valueLabelDisplay: X,
-            value: typeof ie == "function" ? ie(N(Ne), Xe) : ie,
+            value: typeof ie == "function" ? ie(N(ze), Xe) : ie,
             index: Xe,
             open: mt === Xe || lt === Xe || X === "on",
             disabled: m
@@ -30763,9 +30763,9 @@ const cj = xt("span", {
             children: /* @__PURE__ */ g.jsx(Y, {
               "data-index": Xe,
               "aria-label": b ? b(Xe) : o,
-              "aria-valuenow": N(Ne),
+              "aria-valuenow": N(ze),
               "aria-labelledby": i,
-              "aria-valuetext": S ? S(N(Ne), Xe) : s,
+              "aria-valuetext": S ? S(N(ze), Xe) : s,
               value: be[Xe],
               ...wg
             })
@@ -31458,10 +31458,10 @@ const hg = Te(
         r.loadingError = a;
       }
     }
-    return ze(() => (n(), e.store ? () => null : () => {
+    return Be(() => (n(), e.store ? () => null : () => {
       var a;
       (a = r.joggingStore) == null || a.dispose();
-    }), [e.store, e.nova, e.motionGroupId]), ze(() => {
+    }), [e.store, e.nova, e.motionGroupId]), Be(() => {
       const a = r.joggingStore;
       a && (e.locked ? a.lock("external") : a.unlock("external"));
     }, [r.joggingStore, e.locked]), /* @__PURE__ */ g.jsx(
@@ -31548,7 +31548,7 @@ const hg = Te(
     }
     return !1;
   }
-  return ze(() => {
+  return Be(() => {
     if (!a)
       return;
     const l = setTimeout(() => o(!1), 3e3);
@@ -31756,7 +31756,7 @@ const oi = (e, t, r) => ({
   Te((e) => {
     var u;
     const { messages: t = [], onClear: r, height: n = 400, sx: a } = e, o = Le(), s = Ee(null);
-    ze(() => {
+    Be(() => {
       if (t.length === 0) return;
       const d = s.current;
       if (!d) return;
@@ -32024,7 +32024,7 @@ const oi = (e, t, r) => ({
 ), dk = tt(
   Te((e) => {
     const { store: t, onStoreReady: r, ...n } = e, a = Ee(r);
-    ze(() => {
+    Be(() => {
       a.current = r;
     }, [r]);
     const o = _o(() => {
@@ -32391,7 +32391,7 @@ function yg({
   children: n
 }) {
   const a = Ee([]), o = Ee([]), s = Ee(null), { invalidate: i } = _g();
-  ze(() => {
+  Be(() => {
     const d = e.state.joint_position.joints.filter(
       (h) => h !== void 0
     );
@@ -32522,7 +32522,7 @@ function Aj({
 }
 const _j = console.warn;
 function Ej() {
-  return ze(() => {
+  return Be(() => {
     console.warn = (e) => {
       e !== "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand" && _j(e);
     };
@@ -32618,7 +32618,7 @@ const Mj = (e, t) => {
     const [l, c] = Fe(null), u = je((h) => {
       c(h);
     }, []);
-    ze(() => {
+    Be(() => {
       l && (s ? Mj(l, s) : jj(l));
     }, [l, s]);
     const d = /* @__PURE__ */ g.jsx(
@@ -32698,7 +32698,7 @@ const mk = tt(
     }) => {
       var V;
       const d = Le(), { t: h } = at(), [p, f] = Fe(!1), m = Ee(null), b = Ee(null), [S, A] = Fe(!1), [w, C] = Fe({ width: 400, height: 600 }), [R, O] = Fe(0);
-      ze(() => {
+      Be(() => {
         const z = () => {
           if (b.current) {
             const { offsetWidth: ee, offsetHeight: re } = b.current;
@@ -33747,20 +33747,31 @@ function h$(e) {
 }
 const vk = tt(
   Te((e) => {
-    const { items: t, defaultActiveTab: r = 0, onTabChange: n, sx: a, ref: o } = e, [s, i] = Fe(r), l = (c, u) => {
-      i(u), n == null || n(u);
+    const {
+      items: t,
+      activeTab: r,
+      defaultActiveTab: n = 0,
+      onTabChange: a,
+      sx: o,
+      ref: s
+    } = e, i = r !== void 0, [l, c] = Fe(n);
+    Be(() => {
+      i || t.length !== 0 && (l < 0 || l > t.length - 1) && c(0);
+    }, [t.length, i, l]);
+    const u = i ? r : l, d = (h, p) => {
+      i || c(p), a == null || a(p);
     };
     return /* @__PURE__ */ g.jsxs(
       ne,
       {
-        ref: o,
-        sx: { height: "100%", display: "flex", flexDirection: "column", ...a },
+        ref: s,
+        sx: { height: "100%", display: "flex", flexDirection: "column", ...o },
         children: [
           /* @__PURE__ */ g.jsx(ne, { sx: { px: 0, py: 0 }, children: /* @__PURE__ */ g.jsx(
             rp,
             {
-              value: s,
-              onChange: l,
+              value: u,
+              onChange: d,
               sx: {
                 minHeight: "32px",
                 backgroundColor: "transparent",
@@ -33772,11 +33783,11 @@ const vk = tt(
                   gap: 2
                 }
               },
-              children: t.map((c, u) => /* @__PURE__ */ g.jsx(
+              children: t.map((h, p) => /* @__PURE__ */ g.jsx(
                 np,
                 {
-                  label: c.label,
-                  icon: c.icon,
+                  label: h.label,
+                  icon: h.icon,
                   iconPosition: "start",
                   disableRipple: !0,
                   sx: {
@@ -33784,22 +33795,22 @@ const vk = tt(
                     height: "32px",
                     padding: "0px 10px",
                     borderRadius: "12px",
-                    backgroundColor: (d) => {
-                      var h;
-                      return ((h = d.palette.backgroundPaperElevation) == null ? void 0 : h[11]) || "#32344B";
+                    backgroundColor: (f) => {
+                      var m;
+                      return ((m = f.palette.backgroundPaperElevation) == null ? void 0 : m[11]) || "#32344B";
                     },
                     color: "text.primary",
-                    opacity: s === u ? 1 : 0.38,
+                    opacity: u === p ? 1 : 0.38,
                     fontSize: "13px",
                     transition: "all 0.2s ease-in-out",
                     "&:hover": {
-                      opacity: s === u ? 1 : 0.6
+                      opacity: u === p ? 1 : 0.6
                     },
                     "&.Mui-selected": {
                       opacity: 1,
-                      backgroundColor: (d) => {
-                        var h;
-                        return ((h = d.palette.backgroundPaperElevation) == null ? void 0 : h[11]) || "#32344B";
+                      backgroundColor: (f) => {
+                        var m;
+                        return ((m = f.palette.backgroundPaperElevation) == null ? void 0 : m[11]) || "#32344B";
                       },
                       color: "text.primary"
                     },
@@ -33811,12 +33822,12 @@ const vk = tt(
                     }
                   }
                 },
-                c.id
+                h.id
               ))
             }
           ) }),
           /* @__PURE__ */ g.jsx(ne, { sx: { mt: "32px", borderBottom: 1, borderColor: "divider" } }),
-          /* @__PURE__ */ g.jsx(ne, { sx: { flex: 1, overflow: "auto" }, children: t.map((c, u) => /* @__PURE__ */ g.jsx(h$, { value: s, index: u, children: c.content }, c.id)) })
+          /* @__PURE__ */ g.jsx(ne, { sx: { flex: 1, overflow: "auto" }, children: t.map((h, p) => /* @__PURE__ */ g.jsx(h$, { value: u, index: p, children: h.content }, h.id)) })
         ]
       }
     );