tgui-core 1.3.1 → 1.4.0

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

package/dist/components/RoundGauge.js

@@ -1,43 +1,44 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { scale as d, keyOfMatchingRange as M, clamp01 as k } from "../common/math.js";
-import { classes as h } from "../common/react.js";
-import { AnimatedNumber as v } from "./AnimatedNumber.js";
-import { Box as B, computeBoxClassName as $, computeBoxProps as j } from "./Box.js";
-function w(p) {
+import { classes as p } from "../common/react.js";
+import { computeBoxClassName as v, computeBoxProps as B } from "../common/ui.js";
+import { AnimatedNumber as $ } from "./AnimatedNumber.js";
+import { Box as j } from "./Box.js";
+function z(h) {
   const {
     alertAfter: a,
     alertBefore: t,
     className: _,
     format: R,
     maxValue: c = 1,
-    minValue: u = 1,
+    minValue: i = 1,
     ranges: n,
     size: y = 1,
     style: x,
     value: r,
     ...g
-  } = p, G = d(r, u, c), f = k(G), l = n ? {} : { primary: [0, 1] };
+  } = h, G = d(r, i, c), f = k(G), l = n ? {} : { primary: [0, 1] };
   n && Object.keys(n).forEach((o) => {
     const s = n[o];
     l[o] = [
-      d(s[0], u, c),
-      d(s[1], u, c)
+      d(s[0], i, c),
+      d(s[1], i, c)
     ];
   });
   function N() {
     return !!(a && t && r > a && r < t || a && r > a || t && r < t);
   }
   const C = N() && M(f, l);
-  return /* @__PURE__ */ m(B, { inline: !0, children: [
+  return /* @__PURE__ */ m(j, { inline: !0, children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: h([
+        className: p([
           "RoundGauge",
           _,
-          $(g)
+          v(g)
         ]),
-        ...j({
+        ...B({
           style: {
             fontSize: `${y}em`,
             ...x
@@ -48,7 +49,7 @@ function w(p) {
           (a || t) && /* @__PURE__ */ e(
             "g",
             {
-              className: h([
+              className: p([
                 "RoundGauge__alert",
                 C ? `active RoundGauge__alert--${C}` : ""
               ]),
@@ -57,18 +58,18 @@ function w(p) {
           ),
           /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e("circle", { className: "RoundGauge__ringTrack", cx: "50", cy: "50", r: "45" }) }),
           /* @__PURE__ */ e("g", { children: Object.keys(l).map((o, s) => {
-            const i = l[o];
+            const u = l[o];
             return /* @__PURE__ */ e(
               "circle",
               {
                 className: `RoundGauge__ringFill RoundGauge--color--${o}`,
                 style: {
                   strokeDashoffset: Math.max(
-                    (2 - (i[1] - i[0])) * Math.PI * 50,
+                    (2 - (u[1] - u[0])) * Math.PI * 50,
                     0
                   )
                 },
-                transform: `rotate(${180 + 180 * i[0]} 50 50)`,
+                transform: `rotate(${180 + 180 * u[0]} 50 50)`,
                 cx: "50",
                 cy: "50",
                 r: "45"
@@ -105,9 +106,9 @@ function w(p) {
         ] })
       }
     ),
-    /* @__PURE__ */ e(v, { value: r, format: R })
+    /* @__PURE__ */ e($, { value: r, format: R })
   ] });
 }
 export {
-  w as RoundGauge
+  z as RoundGauge
 };

package/dist/components/Section.d.ts

@@ -1,29 +1,4 @@
 import { ReactNode } from 'react';
-import { BoxProps } from './Box';
-type Props = Partial<{
-    /** Buttons to render aside the section title. */
-    buttons: ReactNode;
-    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
-    container_id: string;
-    /** If true, fills all available vertical space. */
-    fill: boolean;
-    /** If true, removes all section padding. */
-    fitted: boolean;
-    /** If true, fills the area without forcing height to 100% */
-    flexGrow: boolean;
-    /** If true, removes the section top padding */
-    noTopPadding: boolean;
-    /** @member Callback function for the `scroll` event */
-    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    /** Shows or hides the scrollbar. */
-    scrollable: boolean;
-    /** Shows or hides the horizontal scrollbar. */
-    scrollableHorizontal: boolean;
-    /** If true, filly the area except for -3rem */
-    stretchContents: boolean;
-    /** Title of the section. */
-    title: ReactNode;
-}> & BoxProps;
 /**
  * ## Section
  * Section is a surface that displays content and actions on a single topic.
@@ -51,5 +26,46 @@ type Props = Partial<{
  * </Section>
  * ```
  */
-export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Section: import('react').ForwardRefExoticComponent<Partial<{
+    /** Buttons to render aside the section title. */
+    buttons: ReactNode;
+    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
+    container_id: string;
+    /** If true, fills all available vertical space. */
+    fill: boolean;
+    /** If true, removes all section padding. */
+    fitted: boolean;
+    /** If true, fills the area without forcing height to 100% */
+    flexGrow: boolean;
+    /** If true, removes the section top padding */
+    noTopPadding: boolean;
+    /** @member Callback function for the `scroll` event */
+    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    /** Shows or hides the scrollbar. */
+    scrollable: boolean;
+    /** Shows or hides the horizontal scrollbar. */
+    scrollableHorizontal: boolean;
+    /** If true, filly the area except for -3rem */
+    stretchContents: boolean;
+    /** Title of the section. */
+    title: ReactNode;
+}> & Partial<{
+    as: string;
+    children: ReactNode;
+    className: string | import('../common/react').BooleanLike;
+    id: string;
+    style: import('react').CSSProperties;
+    tw: string;
+} & import('../common/ui').BooleanStyleMap & import('../common/ui').StringStyleMap & {
+    onClick: import('react').MouseEventHandler<HTMLDivElement>;
+    onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;
+    onDoubleClick: import('react').MouseEventHandler<HTMLDivElement>;
+    onKeyDown: import('react').KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp: import('react').KeyboardEventHandler<HTMLDivElement>;
+    onMouseDown: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseLeave: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseMove: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseOver: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseUp: import('react').MouseEventHandler<HTMLDivElement>;
+    onScroll: import('react').UIEventHandler<HTMLDivElement>;
+}> & import('react').RefAttributes<HTMLDivElement>>;