tgui-core 1.8.4 → 2.0.1

package/dist/components/Chart.js

@@ -1,98 +1,80 @@
-var w = Object.defineProperty;
-var R = (t, o, e) => o in t ? w(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e;
-var p = (t, o, e) => R(t, typeof o != "symbol" ? o + "" : o, e);
-import { jsx as c, jsxs as g } from "react/jsx-runtime";
-import { Component as B, createRef as C } from "react";
-import { zip as u } from "../common/collections.js";
-import { Box as v } from "./Box.js";
-function $(t, o, e, n) {
-  if (t.length === 0)
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useRef as y, useState as B, useEffect as R } from "react";
+import { zip as w } from "../common/collections.js";
+import { Box as $ } from "./Box.js";
+function C(n, l, o, i) {
+  if (n.length === 0)
     return [];
-  const f = u(...t), h = f.map((r) => Math.min(...r)), a = f.map((r) => Math.max(...r));
-  return e !== void 0 && (h[0] = e[0], a[0] = e[1]), n !== void 0 && (h[1] = n[0], a[1] = n[1]), t.map(
-    (r) => u(r, h, a, o).map(
-      ([l, i, d, m]) => (l - i) / (d - i) * m
+  const f = w(...n), c = f.map((r) => Math.min(...r)), t = f.map((r) => Math.max(...r));
+  return o !== void 0 && (c[0] = o[0], t[0] = o[1]), i !== void 0 && (c[1] = i[0], t[1] = i[1]), n.map(
+    (r) => w(r, c, t, l).map(
+      ([s, p, e, u]) => (s - p) / (e - p) * u
     )
   );
 }
-function L(t) {
-  let o = "";
-  for (let e = 0; e < t.length; e++) {
-    const n = t[e];
-    o += `${n[0]},${n[1]} `;
+function k(n) {
+  let l = "";
+  for (let o = 0; o < n.length; o++) {
+    const i = n[o];
+    l += `${i[0]},${i[1]} `;
   }
-  return o;
+  return l;
 }
-class b extends B {
-  constructor(e) {
-    super(e);
-    p(this, "ref");
-    p(this, "state");
-    p(this, "handleResize", () => {
-      const e = this.ref.current;
-      e && this.setState({
-        viewBox: [e.offsetWidth, e.offsetHeight]
-      });
-    });
-    this.ref = C(), this.state = {
-      // Initial guess
-      viewBox: [600, 200]
-    }, this.handleResize = this.handleResize.bind(this);
-  }
-  componentDidMount() {
-    window.addEventListener("resize", this.handleResize), this.handleResize();
+const x = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflow: "hidden"
+};
+function z(n) {
+  const {
+    data: l = [],
+    rangeX: o,
+    rangeY: i,
+    fillColor: f = "none",
+    strokeColor: c = "#ffffff",
+    strokeWidth: t = 2,
+    ...v
+  } = n, r = y(null), [s, p] = B([600, 200]), e = C(l, s, o, i);
+  if (e.length > 0) {
+    const m = e[0], a = e[e.length - 1];
+    e.push([s[0] + t, a[1]]), e.push([s[0] + t, -t]), e.push([-t, -t]), e.push([-t, m[1]]);
   }
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.handleResize);
+  const u = k(e);
+  function d() {
+    const m = r.current;
+    if (!m)
+      return;
+    const a = m.getBoundingClientRect();
+    p([a.width, a.height]);
   }
-  render() {
-    const {
-      data: e = [],
-      rangeX: n,
-      rangeY: f,
-      fillColor: h = "none",
-      strokeColor: a = "#ffffff",
-      strokeWidth: s = 2,
-      ...r
-    } = this.props, { viewBox: l } = this.state, i = $(e, l, n, f);
-    if (i.length > 0) {
-      const z = i[0], x = i[i.length - 1];
-      i.push([l[0] + s, x[1]]), i.push([l[0] + s, -s]), i.push([-s, -s]), i.push([-s, z[1]]);
+  return R(() => (window.addEventListener("resize", d), d(), () => {
+    window.removeEventListener("resize", d);
+  }), []), /* @__PURE__ */ h($, { position: "relative", ...v, children: /* @__PURE__ */ h("div", { ref: r, style: x, children: /* @__PURE__ */ g(
+    "svg",
+    {
+      viewBox: `0 0 ${s[0]} ${s[1]}`,
+      preserveAspectRatio: "none",
+      style: x,
+      children: [
+        /* @__PURE__ */ h("title", { children: "chart" }),
+        /* @__PURE__ */ h(
+          "polyline",
+          {
+            transform: `scale(1, -1) translate(0, -${s[1]})`,
+            fill: f,
+            stroke: c,
+            strokeWidth: t,
+            points: u
+          }
+        )
+      ]
     }
-    const d = L(i), m = { ...r, className: "", ref: this.ref };
-    return /* @__PURE__ */ c(v, { position: "relative", ...r, children: /* @__PURE__ */ c(v, { ...m, children: /* @__PURE__ */ g(
-      "svg",
-      {
-        viewBox: `0 0 ${l[0]} ${l[1]}`,
-        preserveAspectRatio: "none",
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          overflow: "hidden"
-        },
-        children: [
-          /* @__PURE__ */ c("title", { children: "chart" }),
-          /* @__PURE__ */ c(
-            "polyline",
-            {
-              transform: `scale(1, -1) translate(0, -${l[1]})`,
-              fill: h,
-              stroke: a,
-              strokeWidth: s,
-              points: d
-            }
-          )
-        ]
-      }
-    ) }) });
-  }
+  ) }) });
 }
-const j = {
-  Line: b
-};
+z.Line = z;
 export {
-  j as Chart
+  z as Chart
 };

package/dist/components/ColorBox.js

@@ -1,13 +1,13 @@
 import { jsx as t } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
-import { computeBoxClassName as s, computeBoxProps as m } from "../common/ui.js";
+import { computeBoxProps as s, computeBoxClassName as m } from "../common/ui.js";
 function d(r) {
   const { content: l, children: a, className: e, ...o } = r;
   return o.color = l ? null : "default", o.backgroundColor = r.color || "default", /* @__PURE__ */ t(
     "div",
     {
-      className: c(["ColorBox", e, s(o)]),
-      ...m(o),
+      className: c(["ColorBox", e, m(o)]),
+      ...s(o),
       children: l || ""
     }
   );

package/dist/components/Dialog.d.ts

@@ -1,11 +1,27 @@
 import { ReactNode } from 'react';
 type DialogProps = {
+    /** The content of the dialog. */
     children: ReactNode;
+    /** The height of the dialog. */
     height?: string;
+    /** The function to call when close is clicked */
     onClose: () => void;
+    /** The title of the dialog. */
     title: ReactNode;
+    /** The width of the dialog. */
     width?: string;
 };
+/**
+ * ## Dialog
+ * A themed dialog for user interaction.
+ *
+ * @example
+ * ```tsx
+ * <Dialog title="Dialog Title" onClose={() => {}}>
+ *   <div>Dialog Content</div>
+ * </Dialog>
+ * ```
+ */
 export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Dialog {
     var Button: typeof DialogButton;

package/dist/components/Dialog.js

@@ -9,15 +9,15 @@ function d(o) {
       /* @__PURE__ */ t(e, { mr: 2, children: /* @__PURE__ */ t(
         r,
         {
-          mr: "-3px",
-          width: "26px",
-          lineHeight: "22px",
-          textAlign: "center",
           color: "transparent",
           icon: "window-close-o",
+          lineHeight: "22px",
+          mr: "-3px",
+          onClick: n,
+          textAlign: "center",
           tooltip: "Close",
           tooltipPosition: "bottom-start",
-          onClick: n
+          width: "26px"
         }
       ) })
     ] }),

package/dist/components/DmIcon.d.ts

@@ -30,5 +30,5 @@ type Props = {
  * Displays an icon from the BYOND icon reference map. Requires Byond 515+.
  * A much faster alternative to base64 icons.
  */
-export declare function DmIcon(props: Props): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function DmIcon(props: Props): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/components/DraggableControl.d.ts

@@ -0,0 +1,56 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { BoxProps } from './Box';
+type Control = {
+    /** Tooltip-like node to display. */
+    displayElement: ReactNode;
+    /** The value to display. */
+    displayValue: number;
+    /** Whether the element is being dragged */
+    dragging: boolean;
+    /** Whether the input is currently being edited */
+    editing: boolean;
+    /** Attach this to the element you want to be draggable  */
+    handleDragStart: MouseEventHandler<HTMLDivElement>;
+    /** The input element. */
+    inputElement: ReactNode;
+};
+type Props = {
+    children: (control: Control) => ReactNode;
+    /** The external state value. */
+    value: number;
+} & Partial<{
+    /** Animates the value if it was changed externally. */
+    animated: boolean;
+    /** The matrix to use for the drag. */
+    dragMatrix: [number, number];
+    /** Format the value using this function before displaying it. */
+    format: (value: number) => string;
+    /** The maximum value. */
+    maxValue: number;
+    /** The minimum value. */
+    minValue: number;
+    /** An event which fires when you release the input, or successfully enter a number. */
+    onChange: (event: Event, value: number) => void;
+    /** An event which fires when you drag the input. */
+    onDrag: (event: MouseEvent, value: number) => void;
+    /** The step size. */
+    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. */
+    unit: string;
+    /** The rate at which the value is updated. */
+    updateRate: number;
+}> & Omit<BoxProps, 'children'>;
+/**
+ * ## DraggableControl
+ *
+ * A wrapper component for draggable elements.
+ * Generally, you won't need to use this component directly.
+ */
+export declare function DraggableControl(props: Props): ReactNode;
+export {};

package/dist/components/DraggableControl.js

@@ -1,182 +1,132 @@
-import { jsxs as T, Fragment as I, jsx as F } from "react/jsx-runtime";
-import { Component as x, createRef as y } from "react";
-import { clamp as c } from "../common/math.js";
-import { AnimatedNumber as M } from "./AnimatedNumber.js";
-const R = 400;
-function N(v, u) {
-  return v.screenX * u[0] + v.screenY * u[1];
+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];
 }
-class C extends x {
-  constructor(u) {
-    super(u), this.inputRef = y(), this.state = {
-      value: u.value,
-      dragging: !1,
-      editing: !1,
-      internalValue: null,
-      origin: null,
-      suppressingFlicker: !1
-    }, this.flickerTimer = null, this.suppressFlicker = () => {
-      const { suppressFlicker: e } = this.props;
-      e > 0 && (this.setState({
-        suppressingFlicker: !0
-      }), clearTimeout(this.flickerTimer), this.flickerTimer = setTimeout(() => {
-        this.setState({
-          suppressingFlicker: !1
-        });
-      }, e));
-    }, this.handleDragStart = (e) => {
-      const { value: i, dragMatrix: l } = this.props, { editing: s } = this.state;
-      s || (document.body.style["pointer-events"] = "none", this.ref = e.target, this.setState({
-        dragging: !1,
-        origin: N(e, l),
-        value: i,
-        internalValue: i
-      }), this.timer = setTimeout(() => {
-        this.setState({
-          dragging: !0
-        });
-      }, 250), this.dragInterval = setInterval(() => {
-        const { dragging: o, value: g } = this.state, { onDrag: r } = this.props;
-        o && r && r(e, g);
-      }, this.props.updateRate || R), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd));
-    }, this.handleDragMove = (e) => {
-      const { minValue: i, maxValue: l, step: s, stepPixelSize: o, dragMatrix: g } = this.props;
-      this.setState((r) => {
-        const a = { ...r }, p = N(e, g) - a.origin;
-        if (r.dragging) {
-          const h = Number.isFinite(i) ? i % s : 0;
-          a.internalValue = c(
-            a.internalValue + p * s / o,
-            i - s,
-            l + s
-          ), a.value = c(
-            a.internalValue - a.internalValue % s + h,
-            i,
-            l
-          ), a.origin = N(e, g);
-        } else Math.abs(p) > 4 && (a.dragging = !0);
-        return a;
-      });
-    }, this.handleDragEnd = (e) => {
-      const { onChange: i, onDrag: l } = this.props, { dragging: s, value: o, internalValue: g } = this.state;
-      if (document.body.style["pointer-events"] = "auto", clearTimeout(this.timer), clearInterval(this.dragInterval), this.setState({
-        dragging: !1,
-        editing: !s,
-        origin: null
-      }), document.removeEventListener("mousemove", this.handleDragMove), document.removeEventListener("mouseup", this.handleDragEnd), s)
-        this.suppressFlicker(), i && i(e, o), l && l(e, o);
-      else if (this.inputRef) {
-        const r = this.inputRef.current;
-        r.value = g, setTimeout(() => {
-          r.focus(), r.select();
-        }, 10);
-      }
-    };
+function se(r) {
+  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,
+    stepPixelSize: O = 1,
+    suppressFlicker: S = 50,
+    unclamped: j,
+    unit: h,
+    updateRate: w = te,
+    // Box props
+    fontSize: z,
+    height: B,
+    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(() => {
+        t.focus(), t.select();
+      }, 10);
+    }
   }
-  render() {
-    const {
-      dragging: u,
-      editing: e,
-      value: i,
-      suppressingFlicker: l
-    } = this.state, {
-      animated: s,
-      value: o,
-      unit: g,
-      minValue: r,
-      maxValue: a,
-      unclamped: p,
-      format: h,
-      onChange: m,
-      onDrag: f,
-      children: S,
-      // Input props
-      height: V,
-      lineHeight: D,
-      fontSize: b
-    } = this.props;
-    let d = o;
-    (u || l) && (d = i);
-    const k = /* @__PURE__ */ T(I, { children: [
-      s && !u && !l ? /* @__PURE__ */ F(M, { value: d, format: h }) : h ? h(d) : d,
-      g ? ` ${g}` : ""
-    ] }), E = /* @__PURE__ */ F(
-      "input",
-      {
-        ref: this.inputRef,
-        className: "NumberInput__input",
-        style: {
-          display: e ? void 0 : "none",
-          height: V,
-          lineHeight: D,
-          fontsize: b
-        },
-        onBlur: (n) => {
-          if (!e)
-            return;
-          let t;
-          if (p ? t = Number.parseFloat(n.target.value) : t = c(
-            Number.parseFloat(n.target.value),
-            r,
-            a
-          ), Number.isNaN(t)) {
-            this.setState({
-              editing: !1
-            });
-            return;
-          }
-          this.setState({
-            editing: !1,
-            value: t
-          }), this.suppressFlicker(), m && m(n, t), f && f(n, t);
-        },
-        onKeyDown: (n) => {
-          if (n.keyCode === 13) {
-            let t;
-            if (p ? t = Number.parseFloat(n.target.value) : t = c(
-              Number.parseFloat(n.target.value),
-              r,
-              a
-            ), Number.isNaN(t)) {
-              this.setState({
-                editing: !1
-              });
-              return;
-            }
-            this.setState({
-              editing: !1,
-              value: t
-            }), this.suppressFlicker(), m && m(n, t), f && f(n, t);
-            return;
-          }
-          if (n.keyCode === 27) {
-            this.setState({
-              editing: !1
-            });
-            return;
-          }
-        }
-      }
-    );
-    return S({
-      dragging: u,
-      editing: e,
-      value: o,
-      displayValue: d,
-      displayElement: k,
-      inputElement: E,
-      handleDragStart: this.handleDragStart
-    });
+  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) {
+    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 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 A(e, t) {
+    let u = Number.parseFloat(t);
+    if (j || (u = F(u, l, g)), Number.isNaN(u)) {
+      f(!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);
+  }
+  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(
+    "input",
+    {
+      ref: N,
+      className: "NumberInput__input",
+      style: {
+        display: v ? void 0 : "none",
+        height: B,
+        lineHeight: U,
+        fontSize: z
+      },
+      onBlur: $,
+      onKeyDown: X
+    }
+  );
+  return M({
+    displayElement: q,
+    displayValue: d,
+    dragging: i.current,
+    editing: v,
+    handleDragStart: H,
+    inputElement: J
+  });
 }
-C.defaultProps = {
-  minValue: Number.NEGATIVE_INFINITY,
-  maxValue: Number.POSITIVE_INFINITY,
-  step: 1,
-  stepPixelSize: 1,
-  suppressFlicker: 50,
-  dragMatrix: [1, 0]
-};
 export {
-  C as DraggableControl
+  se as DraggableControl
 };

package/dist/components/Dropdown.d.ts

@@ -18,8 +18,6 @@ type Props = {
     autoScroll: boolean;
     /** Whether to display previous / next buttons */
     buttons: boolean;
-    /** Whether to clip the selected text */
-    clipSelectedText: boolean;
     /** Color of dropdown button */
     color: string;
     /** Disables the dropdown */
@@ -28,20 +26,24 @@ type Props = {
     displayText: ReactNode;
     /** Icon to display in dropdown button */
     icon: string;
+    /** Whether the icon should be displayed alone */
+    iconOnly: boolean;
     /** Angle of the icon */
     iconRotation: number;
     /** Whether or not the icon should spin */
     iconSpin: boolean;
-    /** Width of the dropdown menu. Default: 15rem */
-    menuWidth: string;
+    /** Width of the dropdown menu in box units. Default: 15 */
+    menuWidth: string | number;
     /** Whether or not the arrow on the right hand side of the dropdown button is visible */
     noChevron: boolean;
-    /** Called when dropdown button is clicked */
-    onClick: (event: any) => void;
     /** Dropdown renders over instead of below */
     over: boolean;
     /** Text to show when nothing has been selected. */
     placeholder: string;
+    /** @deprecated If you want to allow dropdown breaks layout, set width 100% */
+    clipSelectedText: boolean;
+    /** Called when dropdown button is clicked */
+    onClick: (event: any) => void;
 }> & BoxProps;
 /**
  * ## Dropdown