tgui-core 2.0.3 → 2.0.4

package/dist/components/DraggableControl.d.ts

@@ -37,8 +37,6 @@ type Props = {
     step: number;
     /** The step size in pixels. */
     stepPixelSize: number;
-    /** The number of milliseconds to suppress flickering. */
-    suppressFlicker: number;
     /** Whether to unclamp the value. */
     unclamped: boolean;
     /** The unit of the value. */

package/dist/components/DraggableControl.js

@@ -1,132 +1,111 @@
-import { jsxs as W, Fragment as Z, jsx as P } from "react/jsx-runtime";
-import { useState as y, useRef as c, useEffect as C } from "react";
-import { KEY as Y } from "../common/keys.js";
-import { clamp as F } from "../common/math.js";
-import { AnimatedNumber as ee } from "./AnimatedNumber.js";
-const te = 400;
-function K(r, p) {
-  return r.screenX * p[0] + r.screenY * p[1];
+import { jsxs as $, Fragment as q, jsx as D } from "react/jsx-runtime";
+import { useState as F, useRef as i, useEffect as J } from "react";
+import { KEY as Q, isEscape as W } from "../common/keys.js";
+import { clamp as b } from "../common/math.js";
+import { AnimatedNumber as Z } from "./AnimatedNumber.js";
+const C = 400, x = -1;
+function A(n, m) {
+  return n.screenX * m[0] + n.screenY * m[1];
 }
-function se(r) {
+function ie(n) {
   const {
     // Our props
-    animated: p,
-    children: M,
-    dragMatrix: V = [1, 0],
-    format: E,
-    maxValue: g = Number.POSITIVE_INFINITY,
-    minValue: l = Number.NEGATIVE_INFINITY,
-    onChange: s,
-    onDrag: a,
-    step: o = 1,
+    animated: m,
+    children: L,
+    dragMatrix: S = [1, 0],
+    format: g,
+    maxValue: N = Number.POSITIVE_INFINITY,
+    minValue: o = Number.NEGATIVE_INFINITY,
+    onChange: a,
+    onDrag: l,
+    step: s = 1,
     stepPixelSize: O = 1,
-    suppressFlicker: S = 50,
-    unclamped: j,
-    unit: h,
-    updateRate: w = te,
+    unclamped: Y,
+    unit: V,
+    updateRate: k = C,
     // Box props
-    fontSize: z,
-    height: B,
+    fontSize: K,
+    height: P,
     lineHeight: U
-  } = r, [G, T] = y(r.value), [v, f] = y(!1), [k, D] = y(!1), i = c(!1), n = c(0), m = c(0), R = c(null), N = c(null), I = c(null), b = c(null);
-  C(() => {
-    T(r.value);
-  }, [r.value]);
-  function _(e) {
-    if (document.body.style["pointer-events"] = "auto", b.current && clearTimeout(b.current), I.current && clearInterval(I.current), i.current = !1, f(!1), m.current = 0, document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", _), L(), s == null || s(e, n.current), a == null || a(e, n.current), N.current) {
-      const t = N.current;
-      t.value = n.toString(), setTimeout(() => {
+  } = n, [ee, I] = F(n.value), [d, v] = F(!1), r = i(!1), u = i(n.value), c = i(0), E = i(x), y = i(null), T = i(null), p = i(null);
+  J(() => {
+    n.value !== u.current && (u.current = n.value, I(n.value));
+  }, [n.value]);
+  function j(e) {
+    d || (document.body.style["pointer-events"] = "none", E.current = A(e.nativeEvent, S), c.current = n.value, r.current = !0, document.addEventListener("mouseup", _), p.current = setTimeout(() => {
+      w(e.nativeEvent);
+    }, 100));
+  }
+  function w(e) {
+    if (r.current)
+      document.addEventListener("mousemove", h), T.current = setInterval(() => {
+        r.current && (l == null || l(e, n.value));
+      }, k);
+    else if (v(!0), y.current) {
+      const t = y.current;
+      t.value = c.current.toString(), setTimeout(() => {
         t.focus(), t.select();
       }, 10);
     }
+    p.current && clearTimeout(p.current);
   }
-  function x(e) {
-    if (!m.current) return;
-    const t = K(e, V), u = t - m.current;
-    if (!i.current) {
-      Math.abs(u) > 4 && (i.current = !0);
-      return;
-    }
-    const Q = Number.isFinite(l) ? l % o : 0;
-    n.current = F(
-      n.current + u * o / O,
-      l - o,
-      g + o
-    ), T(
-      F(
-        n.current - n.current % o + Q,
-        l,
-        g
-      )
-    ), m.current = t;
+  function h(e) {
+    const t = A(e, S), H = t - E.current, X = Number.isFinite(o) ? o % s : 0;
+    c.current = b(
+      c.current + H * s / O,
+      o - s,
+      N + s
+    );
+    const R = b(
+      c.current - c.current % s + X,
+      o,
+      N
+    );
+    u.current = R, I(R), E.current = t;
   }
-  function H(e) {
-    if (v) return;
-    const t = e.nativeEvent;
-    document.body.style["pointer-events"] = "none", m.current = K(t, V), n.current = r.value, b.current = setTimeout(() => {
-      i.current = !0;
-    }, 250), I.current = setInterval(() => {
-      i && (a == null || a(t, r.value));
-    }, w), document.addEventListener("mousemove", x), document.addEventListener("mouseup", _);
+  function _(e) {
+    document.body.style["pointer-events"] = "auto", T.current && clearInterval(T.current), E.current = x, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", _), r.current && (a == null || a(e, u.current), l == null || l(e, u.current), r.current = !1);
   }
-  function X(e) {
-    if (e.key === Y.Enter) {
-      e.preventDefault(), e.stopPropagation(), A(e.nativeEvent, e.currentTarget.value);
-      return;
-    }
-    if (e.key === Y.Escape) {
-      f(!1);
-      return;
-    }
+  function z(e) {
+    (e.key === Q.Enter || W(e.key)) && v(!1);
   }
-  function A(e, t) {
-    let u = Number.parseFloat(t);
-    if (j || (u = F(u, l, g)), Number.isNaN(u)) {
-      f(!1);
+  function B(e) {
+    let t = Number.parseFloat(e.currentTarget.value);
+    if (Y || (t = b(t, o, N)), Number.isNaN(t)) {
+      v(!1);
       return;
     }
-    f(!1), T(u), n.current = u, L(), s == null || s(e, u);
-  }
-  function L() {
-    if (S <= 0) return;
-    const e = R.current;
-    if (e)
-      return D(!0), clearTimeout(e), R.current = setTimeout(() => {
-        D(!1);
-      }, S), () => clearTimeout(e);
-  }
-  function $(e) {
-    v && f(!1), A(e.nativeEvent, e.currentTarget.value);
+    c.current = t, u.current = t, I(t), a == null || a(e.nativeEvent, t), d && v(!1);
   }
-  let d = r.value;
-  (i.current || k) && (d = G);
-  const q = /* @__PURE__ */ W(Z, { children: [
-    p && !i.current && !k ? /* @__PURE__ */ P(ee, { value: d, format: E }) : E ? E(d) : d,
-    h ? ` ${h}` : ""
-  ] }), J = /* @__PURE__ */ P(
+  let f = n.value;
+  r.current && (f = u.current);
+  const G = /* @__PURE__ */ $(q, { children: [
+    m && !r.current ? /* @__PURE__ */ D(Z, { value: f, format: g }) : g ? g(f) : f,
+    V ? ` ${V}` : ""
+  ] }), M = /* @__PURE__ */ D(
     "input",
     {
-      ref: N,
+      ref: y,
       className: "NumberInput__input",
       style: {
-        display: v ? void 0 : "none",
-        height: B,
+        display: d ? void 0 : "none",
+        height: P,
         lineHeight: U,
-        fontSize: z
+        fontSize: K
       },
-      onBlur: $,
-      onKeyDown: X
+      onBlur: B,
+      onKeyDown: z
     }
   );
-  return M({
-    displayElement: q,
-    displayValue: d,
-    dragging: i.current,
-    editing: v,
-    handleDragStart: H,
-    inputElement: J
+  return L({
+    displayElement: G,
+    displayValue: f,
+    dragging: r.current,
+    editing: d,
+    handleDragStart: j,
+    inputElement: M
   });
 }
 export {
-  se as DraggableControl
+  ie as DraggableControl
 };

package/dist/components/FitText.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes, PropsWithChildren, RefObject } from 'react';
+import { Component, HTMLAttributes, PropsWithChildren } from 'react';
 type Props = {
     acceptableDifference?: number;
     maxFontSize: number;
@@ -9,7 +9,7 @@ type State = {
     fontSize: number;
 };
 export declare class FitText extends Component<Props, State> {
-    ref: RefObject<HTMLDivElement | null>;
+    ref: import('react').RefObject<HTMLDivElement | null>;
     state: State;
     constructor(props: Props);
     componentDidUpdate(prevProps: any): void;

package/dist/components/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
+import { CSSProperties, Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
 type Props = Required<{
@@ -51,7 +51,7 @@ type State = {
  * to fine tune the value, or single click it to manually type a number.
  */
 export declare class NumberInput extends Component<Props, State> {
-    inputRef: RefObject<HTMLInputElement | null>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
     dragTimeout: NodeJS.Timeout;
     dragInterval: NodeJS.Timeout;
     state: State;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

package/styles/components/Tooltip.scss

@@ -14,4 +14,5 @@ $border-radius: 0 !default;
   padding: var(--space-m) var(--space-l);
   pointer-events: none;
   text-align: left;
+  width: max-content;
 }