tgui-core 1.3.2 → 1.5.1

package/dist/components/ByondUi.d.ts

@@ -0,0 +1,50 @@
+import { BoxProps } from './Box';
+type SampleByondParams = Partial<{
+    /** Can be auto-generated. */
+    id: string;
+    /**  Defaults to the current window */
+    parent: string;
+    /** The type of control. Read-only. */
+    type: string;
+    /** Text shown in label/button/input. For input controls this setting is only available at runtime. */
+    text: string;
+}>;
+type Props = Partial<{
+    /** An object with parameters, which are directly passed to
+     * the `winset` proc call.
+     *
+     * You can find a full reference of these parameters
+     * in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html). */
+    params: SampleByondParams & Record<string, any>;
+}> & BoxProps;
+/**
+ * ## ByondUi
+ * Displays a BYOND UI element on top of the browser, and leverages browser's
+ * layout engine to position it just like any other HTML element. It is
+ * especially useful if you want to display a secondary game map in your
+ * interface.
+ *
+ * @example
+ * ```tsx
+ * <ByondUi
+ *   params={{
+ *    id: 'test_button', // optional, can be auto-generated
+ *    parent: 'some_container', // optional, defaults to the current window
+ *    type: 'button',
+ *    text: 'Hello, world!',
+ *   }} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ByondUi
+ *   params={{
+ *    id: 'test_map',
+ *    type: 'map',
+ *   }} />
+ * ```
+ *
+ * It supports a full set of `Box` properties for layout purposes.
+ */
+export declare function ByondUi(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ByondUi.js

@@ -1,19 +1,18 @@
-import { jsx as s } from "react/jsx-runtime";
-import { Component as a, createRef as c } from "react";
-import { shallowDiffers as r } from "../common/react.js";
+import { jsx as l } from "react/jsx-runtime";
+import { useRef as f, useEffect as p } from "react";
 import { debounce as m } from "../common/timer.js";
-import { computeBoxProps as l } from "./Box.js";
+import { computeBoxProps as w } from "../common/ui.js";
 const o = [];
-function h(t) {
-  const n = o.length;
+function a(t) {
+  const e = o.length;
   o.push(null);
-  const e = t || `byondui_${n}`;
+  const n = t || `byondui_${e}`;
   return {
     render: (i) => {
-      o[n] = e, Byond.winset(e, i);
+      o[e] = n, Byond.winset(n, i);
     },
     unmount: () => {
-      o[n] = null, Byond.winset(e, {
+      o[e] = null, Byond.winset(n, {
         parent: ""
       });
     }
@@ -21,53 +20,42 @@ function h(t) {
 }
 window.addEventListener("beforeunload", () => {
   for (let t = 0; t < o.length; t++) {
-    const n = o[t];
-    typeof n == "string" && (o[t] = null, Byond.winset(n, {
+    const e = o[t];
+    typeof e == "string" && (o[t] = null, Byond.winset(e, {
       parent: ""
     }));
   }
 });
-function u(t) {
-  const n = window.devicePixelRatio ?? 1, e = t.getBoundingClientRect();
+function x(t) {
+  const e = window.devicePixelRatio ?? 1, n = t.getBoundingClientRect();
   return {
-    pos: [e.left * n, e.top * n],
+    pos: [n.left * e, n.top * e],
     size: [
-      (e.right - e.left) * n,
-      (e.bottom - e.top) * n
+      (n.right - n.left) * e,
+      (n.bottom - n.top) * e
     ]
   };
 }
-class U extends a {
-  constructor(n) {
-    var e;
-    super(n), this.containerRef = c(), this.byondUiElement = h((e = n.params) == null ? void 0 : e.id), this.handleResize = m(() => {
-      this.forceUpdate();
-    }, 100);
-  }
-  shouldComponentUpdate(n) {
-    const { params: e = {}, ...i } = this.props, { params: d = {}, ...p } = n;
-    return r(e, d) || r(i, p);
-  }
-  componentDidMount() {
-    window.addEventListener("resize", this.handleResize), this.componentDidUpdate(), this.handleResize();
-  }
-  componentDidUpdate() {
-    const { params: n = {} } = this.props, e = u(this.containerRef.current);
-    this.byondUiElement.render({
+function h(t) {
+  const { params: e, ...n } = t, i = f(null), d = f(a(e == null ? void 0 : e.id));
+  function s() {
+    const c = i.current;
+    if (!c) return;
+    const r = x(c);
+    d.current.render({
       parent: Byond.windowId,
-      ...n,
-      pos: `${e.pos[0]},${e.pos[1]}`,
-      size: `${e.size[0]}x${e.size[1]}`
+      ...e,
+      pos: `${r.pos[0]},${r.pos[1]}`,
+      size: `${r.size[0]}x${r.size[1]}`
     });
   }
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.handleResize), this.byondUiElement.unmount();
-  }
-  render() {
-    const { params: n, ...e } = this.props;
-    return /* @__PURE__ */ s("div", { ref: this.containerRef, ...l(e), children: /* @__PURE__ */ s("div", { style: { minHeight: "22px" } }) });
-  }
+  const u = m(() => {
+    s();
+  }, 100);
+  return p(() => (window.addEventListener("resize", u), s(), () => {
+    window.removeEventListener("resize", u), d.current.unmount();
+  }), []), /* @__PURE__ */ l("div", { ref: i, ...w(n), children: /* @__PURE__ */ l("div", { style: { minHeight: "22px" } }) });
 }
 export {
-  U as ByondUi
+  h as ByondUi
 };

package/dist/components/ColorBox.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
-import { computeBoxClassName as s, computeBoxProps as m } from "./Box.js";
+import { computeBoxClassName as s, computeBoxProps 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(

package/dist/components/Dropdown.js

@@ -1,7 +1,7 @@
 import { jsx as l, jsxs as p, Fragment as W } from "react/jsx-runtime";
 import { useState as F, useRef as L, useEffect as S } from "react";
 import { classes as N } from "../common/react.js";
-import { unit as $ } from "./Box.js";
+import { unit as $ } from "../common/ui.js";
 import { Button as D } from "./Button.js";
 import { Icon as b } from "./Icon.js";
 import { Popper as q } from "./Popper.js";

package/dist/components/Flex.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { classes as r } from "../common/react.js";
-import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "./Box.js";
+import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "../common/ui.js";
 function p(e) {
   return r([
     "Flex",

package/dist/components/Icon.d.ts

@@ -15,7 +15,7 @@ type Props = {
     spin: BooleanLike;
     /** Custom CSS. */
     style: CSSProperties;
-}> & BoxProps;
+}> & Omit<BoxProps, 'children'>;
 export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Icon {
     var Stack: typeof IconStack;

package/dist/components/Icon.js

@@ -1,9 +1,9 @@
 import { jsx as m } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as p, computeBoxClassName as u } from "./Box.js";
+import { computeBoxProps as p, computeBoxClassName as u } from "../common/ui.js";
 const f = /-o$/;
 function d(c) {
-  const { name: s, size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
+  const { name: s = "", size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
   o && (n.fontSize = `${o * 100}%`), r && (n.transform = `rotate(${r}deg)`), e.style = n;
   const x = p(e);
   let t = "";

package/dist/components/Image.js

@@ -1,32 +1,33 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useRef as a } from "react";
-import { computeBoxProps as f } from "./Box.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import { computeBoxProps as f } from "../common/ui.js";
 const l = 5;
-function E(o) {
+function E(m) {
   const {
-    fixBlur: s = !0,
-    fixErrors: m = !1,
-    objectFit: n = "fill",
-    src: e,
-    ...c
-  } = o, t = a(0), r = f(c);
-  return r.style = {
-    ...r.style,
-    "-ms-interpolation-mode": s ? "nearest-neighbor" : "auto",
-    objectFit: n
-  }, /* @__PURE__ */ p(
+    fixBlur: r = !0,
+    fixErrors: n = !1,
+    objectFit: s = "fill",
+    src: o,
+    ...i
+  } = m, t = p(0), e = f(i);
+  return e.style = {
+    ...e.style,
+    "-ms-interpolation-mode": r ? "nearest-neighbor" : "auto",
+    imageRendering: r ? "pixelated" : "auto",
+    objectFit: s
+  }, /* @__PURE__ */ a(
     "img",
     {
-      onError: (i) => {
-        if (m && t.current < l) {
-          const u = i.currentTarget;
+      onError: (c) => {
+        if (n && t.current < l) {
+          const u = c.currentTarget;
           setTimeout(() => {
-            u.src = `${e}?attempt=${t.current}`, t.current++;
+            u.src = `${o}?attempt=${t.current}`, t.current++;
           }, 1e3);
         }
       },
-      src: e,
-      ...r,
+      src: o,
+      ...e,
       alt: "dm icon"
     }
   );

package/dist/components/ImageButton.js

@@ -1,6 +1,6 @@
 import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as A } from "./Box.js";
+import { computeBoxProps as A } from "../common/ui.js";
 import { DmIcon as D } from "./DmIcon.js";
 import { Icon as F } from "./Icon.js";
 import { Image as j } from "./Image.js";

package/dist/components/InfinitePlane.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as n } from "react/jsx-runtime";
 import { Component as v } from "react";
-import { computeBoxProps as Z } from "./Box.js";
+import { computeBoxProps as Z } from "../common/ui.js";
 import { Button as c } from "./Button.js";
 import { ProgressBar as g } from "./ProgressBar.js";
 import { Stack as d } from "./Stack.js";

package/dist/components/Input.d.ts

@@ -38,18 +38,21 @@ type OptionalProps = Partial<{
     /** Fires when user is 'done typing': Clicked out, blur, enter key */
     onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
     /** Fires once the enter key is pressed */
-    onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+    onEnter: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
     /** Fires once the escape key is pressed */
     onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
     /** The placeholder text when everything is cleared */
     placeholder: string;
     /** Clears the input value on enter */
     selfClear: boolean;
+    /** Auto-updates the input value on props change, ie, data from Byond */
+    updateOnPropsChange: boolean;
     /** The state variable of the input. */
     value: string | number;
 }>;
-type Props = OptionalProps & ConditionalProps & BoxProps;
-export declare function toInputValue(value: string | number | undefined): string;
+type Props = OptionalProps & ConditionalProps & Omit<BoxProps, 'children'>;
+type InputValue = string | number | undefined;
+export declare function toInputValue(value: InputValue): string;
 /**
  * ### Input
  * A basic text input which allow users to enter text into a UI.

package/dist/components/Input.js

@@ -1,81 +1,86 @@
-import { jsxs as E, jsx as p } from "react/jsx-runtime";
-import { useRef as K, useEffect as m } from "react";
-import { KEY as V, isEscape as j } from "../common/keys.js";
-import { classes as k } from "../common/react.js";
-import { debounce as B } from "../common/timer.js";
+import { jsxs as j, jsx as p } from "react/jsx-runtime";
+import { useRef as k, useEffect as m } from "react";
+import { KEY as w, isEscape as B } from "../common/keys.js";
+import { classes as F } from "../common/react.js";
+import { debounce as O } from "../common/timer.js";
 import { Box as R } from "./Box.js";
-function l(u) {
-  return typeof u != "number" && typeof u != "string" ? "" : String(u);
+function d(r) {
+  return typeof r != "number" && typeof r != "string" ? "" : String(r);
 }
-const S = B((u) => u(), 250);
-function A(u) {
+const V = O((r) => r(), 250);
+function C(r) {
   const {
-    autoFocus: d,
-    autoSelect: s,
-    className: g,
-    disabled: I,
-    expensive: T,
-    fluid: b,
+    autoFocus: g,
+    autoSelect: l,
+    className: I,
+    disabled: T,
+    expensive: b,
+    fluid: h,
     maxLength: x,
     monospace: y,
-    onChange: t,
-    onEnter: n,
-    onEscape: o,
+    onChange: n,
+    onEnter: c,
+    onEscape: s,
     onInput: i,
-    placeholder: h,
-    selfClear: w,
-    value: a,
-    ...N
-  } = u, c = K(null);
-  function _(e) {
-    var f;
+    placeholder: N,
+    selfClear: _,
+    updateOnPropsChange: D,
+    value: o,
+    ...E
+  } = r, a = k(null);
+  function K(t) {
+    var u;
     if (!i) return;
-    const r = (f = e.currentTarget) == null ? void 0 : f.value;
-    T ? S(() => i(e, r)) : i(e, r);
+    const e = (u = t.currentTarget) == null ? void 0 : u.value;
+    b ? V(() => i(t, e)) : i(t, e);
   }
-  function D(e) {
-    if (e.key === V.Enter) {
-      n == null || n(e, e.currentTarget.value), w ? e.currentTarget.value = "" : (e.currentTarget.blur(), t == null || t(e, e.currentTarget.value));
+  function S(t) {
+    if (t.key === w.Enter) {
+      c == null || c(t, t.currentTarget.value), _ ? t.currentTarget.value = "" : (t.currentTarget.blur(), n == null || n(t, t.currentTarget.value));
       return;
     }
-    j(e.key) && (o == null || o(e), e.currentTarget.value = l(a), e.currentTarget.blur());
+    B(t.key) && (s == null || s(t), t.currentTarget.value = d(o), t.currentTarget.blur());
   }
-  return m(() => {
-    const e = c.current;
+  function f(t) {
+    const e = a.current;
     if (!e) return;
-    const r = l(a);
-    e.value !== r && (e.value = r), !(!d && !s) && setTimeout(() => {
-      e.focus(), s && e.select();
-    }, 1);
+    const u = d(t);
+    e.value !== u && (e.value = u);
+  }
+  return m(() => {
+    const t = a.current;
+    if (t) {
+      f(o);
+      const e = g || l, u = document.activeElement === t;
+      e && !u && setTimeout(() => {
+        t.focus(), l && t.select();
+      }, 1);
+    }
   }, []), m(() => {
-    const e = c.current;
-    if (!e || document.activeElement === e)
-      return;
-    const r = l(a);
-    e.value !== r && (e.value = r);
-  }), /* @__PURE__ */ E(
+    D && f(o);
+  }, [o]), /* @__PURE__ */ j(
     R,
     {
-      className: k([
+      className: F([
         "Input",
-        b && "Input--fluid",
+        h && "Input--fluid",
         y && "Input--monospace",
-        g
+        I
       ]),
-      ...N,
+      ...E,
       children: [
         /* @__PURE__ */ p("div", { className: "Input__baseline", children: "." }),
         /* @__PURE__ */ p(
           "input",
           {
             className: "Input__input",
-            disabled: I,
+            disabled: T,
             maxLength: x,
-            onBlur: (e) => t == null ? void 0 : t(e, e.target.value),
-            onChange: _,
-            onKeyDown: D,
-            placeholder: h,
-            ref: c
+            onBlur: (t) => n == null ? void 0 : n(t, t.target.value),
+            onChange: K,
+            onKeyDown: S,
+            placeholder: N,
+            ref: a
           }
         )
       ]
@@ -83,6 +88,6 @@ function A(u) {
   );
 }
 export {
-  A as Input,
-  l as toInputValue
+  C as Input,
+  d as toInputValue
 };

package/dist/components/KeyListener.d.ts

@@ -1,14 +1,8 @@
-import { Component } from 'react';
 import { KeyEvent } from '../common/events';
-type KeyListenerProps = Partial<{
+type Props = Partial<{
     onKey: (key: KeyEvent) => void;
     onKeyDown: (key: KeyEvent) => void;
     onKeyUp: (key: KeyEvent) => void;
 }>;
-export declare class KeyListener extends Component<KeyListenerProps> {
-    dispose: () => void;
-    constructor(props: any);
-    componentWillUnmount(): void;
-    render(): null;
-}
+export declare function KeyListener(props: Props): null;
 export {};

package/dist/components/KeyListener.js

@@ -1,23 +1,15 @@
-var t = Object.defineProperty;
-var e = (s, o, p) => o in s ? t(s, o, { enumerable: !0, configurable: !0, writable: !0, value: p }) : s[o] = p;
-var i = (s, o, p) => e(s, typeof o != "symbol" ? o + "" : o, p);
-import { Component as r } from "react";
-import { listenForKeyEvents as h } from "../common/hotkeys.js";
-class d extends r {
-  constructor(p) {
-    super(p);
-    i(this, "dispose");
-    this.dispose = h((n) => {
-      this.props.onKey && this.props.onKey(n), n.isDown() && this.props.onKeyDown && this.props.onKeyDown(n), n.isUp() && this.props.onKeyUp && this.props.onKeyUp(n);
+import { useEffect as i } from "react";
+import { listenForKeyEvents as t } from "../common/hotkeys.js";
+function r(n) {
+  return i(() => {
+    const o = t((e) => {
+      n.onKey && n.onKey(e), e.isDown() && n.onKeyDown && n.onKeyDown(e), e.isUp() && n.onKeyUp && n.onKeyUp(e);
     });
-  }
-  componentWillUnmount() {
-    this.dispose();
-  }
-  render() {
-    return null;
-  }
+    return () => {
+      o();
+    };
+  }, []), null;
 }
 export {
-  d as KeyListener
+  r as KeyListener
 };

package/dist/components/Knob.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { keyOfMatchingRange as $, scale as t } from "../common/math.js";
 import { classes as j } from "../common/react.js";
-import { computeBoxClassName as E, computeBoxProps as T } from "./Box.js";
+import { computeBoxClassName as E, computeBoxProps as T } from "../common/ui.js";
 import { DraggableControl as I } from "./DraggableControl.js";
 function H(c) {
   const {

package/dist/components/LabeledList.js

@@ -1,6 +1,7 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
-import { Box as s, unit as g } from "./Box.js";
+import { unit as g } from "../common/ui.js";
+import { Box as r } from "./Box.js";
 import { Divider as x } from "./Divider.js";
 import { Tooltip as N } from "./Tooltip.js";
 function b(l) {
@@ -11,19 +12,19 @@ function v(l) {
   const {
     className: t,
     label: a,
-    labelColor: L = "label",
-    labelWrap: m,
+    labelColor: m = "label",
+    labelWrap: L,
     color: p,
     textAlign: _,
     buttons: o,
-    content: h,
-    children: f,
-    verticalAlign: r = "baseline",
+    content: f,
+    children: h,
+    verticalAlign: s = "baseline",
     tooltip: n
   } = l;
   let i;
   a && (i = a, typeof a == "string" && (i += ":")), n !== void 0 && (i = /* @__PURE__ */ e(N, { content: n, children: /* @__PURE__ */ e(
-    s,
+    r,
     {
       as: "span",
       style: {
@@ -33,33 +34,33 @@ function v(l) {
     }
   ) }));
   const u = /* @__PURE__ */ e(
-    s,
+    r,
     {
       as: "td",
-      color: L,
+      color: m,
       className: c([
         "LabeledList__cell",
         // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
-        !m && "LabeledList__label--nowrap"
+        !L && "LabeledList__label--nowrap"
       ]),
-      verticalAlign: r,
+      verticalAlign: s,
       children: i
     }
   );
   return /* @__PURE__ */ d("tr", { className: c(["LabeledList__row", t]), children: [
     u,
     /* @__PURE__ */ d(
-      s,
+      r,
       {
         as: "td",
         color: p,
         textAlign: _,
         className: "LabeledList__cell",
         colSpan: o ? void 0 : 2,
-        verticalAlign: r,
+        verticalAlign: s,
         children: [
-          h,
-          f
+          f,
+          h
         ]
       }
     ),

package/dist/components/Modal.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { classes as t } from "../common/react.js";
-import { computeBoxClassName as a, computeBoxProps as c } from "./Box.js";
+import { computeBoxClassName as a, computeBoxProps as c } from "../common/ui.js";
 import { Dimmer as i } from "./Dimmer.js";
 function f(m) {
   const { className: s, children: e, ...o } = m;

package/dist/components/ProgressBar.js

@@ -2,7 +2,7 @@ import { jsxs as B, jsx as i } from "react/jsx-runtime";
 import { CSS_COLORS as C } from "../common/constants.js";
 import { keyOfMatchingRange as P, toFixed as h, scale as x, clamp01 as _ } from "../common/math.js";
 import { classes as v } from "../common/react.js";
-import { computeBoxProps as y, computeBoxClassName as N } from "./Box.js";
+import { computeBoxProps as y, computeBoxClassName as N } from "../common/ui.js";
 function j(n) {
   const {
     className: m,

package/dist/components/RoundGauge.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { BoxProps } from './Box';
 type Props = {
     /** The current value of the metric. */
@@ -20,7 +21,7 @@ type Props = {
     /** When provided scales the gauge. */
     size: number;
     /** Custom css */
-    style: React.CSSProperties;
+    style: CSSProperties;
 }> & BoxProps;
 /**
  * ## RoundGauge