tgui-core 1.1.22 → 1.1.24

package/dist/components/Input.js

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

package/dist/components/LabeledList.js

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
 import { classes as i } from "../common/react.js";
 import { Box as r, unit as g } from "./Box.js";
 import { Divider as x } from "./Divider.js";
@@ -12,7 +12,7 @@ import '../assets/LabeledList.css';const v = "_labeledList_pb6nb_9", y = "_row_p
 };
 function p(e) {
   const { children: t } = e;
-  return /* @__PURE__ */ l("table", { className: "LabeledList", children: t });
+  return /* @__PURE__ */ l("table", { className: "LabeledList", children: /* @__PURE__ */ l("tbody", { children: t }) });
 }
 function z(e) {
   const {
@@ -21,15 +21,15 @@ function z(e) {
     labelColor: _ = "label",
     labelWrap: m,
     color: L,
-    textAlign: f,
+    textAlign: h,
     buttons: a,
-    content: h,
+    content: f,
     children: u,
     verticalAlign: c = "baseline",
-    tooltip: b
+    tooltip: d
   } = e;
   let n;
-  s && (n = s, typeof s == "string" && (n += ":")), b !== void 0 && (n = /* @__PURE__ */ l(N, { content: b, children: /* @__PURE__ */ l(
+  s && (n = s, typeof s == "string" && (n += ":")), d !== void 0 && (n = /* @__PURE__ */ l(N, { content: d, children: /* @__PURE__ */ l(
     r,
     {
       as: "span",
@@ -53,19 +53,19 @@ function z(e) {
       children: n
     }
   );
-  return /* @__PURE__ */ d("tr", { className: i([o.row, t]), children: [
+  return /* @__PURE__ */ b("tr", { className: i([o.row, t]), children: [
     w,
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ b(
       r,
       {
         as: "td",
         color: L,
-        textAlign: f,
+        textAlign: h,
         className: o.cell,
         colSpan: a ? void 0 : 2,
         verticalAlign: c,
         children: [
-          h,
+          f,
           u
         ]
       }

package/dist/components/NoticeBox.d.ts

@@ -2,7 +2,7 @@ import { BoxProps } from './Box';
 
 type Props = ExclusiveProps & BoxProps;
 /** You MUST use only one or none */
-type NoticeType = 'info' | 'success' | 'danger';
+type NoticeType = 'info' | 'success' | 'warning' | 'danger';
 type None = {
     [K in NoticeType]?: undefined;
 };
@@ -12,6 +12,9 @@ type ExclusiveProps = None | (Omit<None, 'info'> & {
 }) | (Omit<None, 'success'> & {
     /** Green notice */
     success: boolean;
+}) | (Omit<None, 'warning'> & {
+    /** Orange notice */
+    warning: boolean;
 }) | (Omit<None, 'danger'> & {
     /** Red notice */
     danger: boolean;

package/dist/components/NoticeBox.js

@@ -1,49 +1,50 @@
-import { jsx as t } from "react/jsx-runtime";
-import { classes as a } from "../common/react.js";
+import { jsx as a } from "react/jsx-runtime";
+import { classes as i } from "../common/react.js";
 import { Box as y } from "./Box.js";
-import '../assets/NoticeBox.css';const m = "_noticeBox_56yom_17", i = "_color__black_56yom_28", g = "_color__white_56yom_33", b = "_color__red_56yom_38", d = "_color__orange_56yom_43", p = "_color__yellow_56yom_48", u = "_color__olive_56yom_53", w = "_color__green_56yom_58", f = "_color__teal_56yom_63", v = "_color__blue_56yom_68", x = "_color__violet_56yom_73", k = "_color__purple_56yom_78", B = "_color__pink_56yom_83", h = "_color__brown_56yom_88", N = "_color__grey_56yom_93", j = "_color__good_56yom_103", q = "_color__average_56yom_108", z = "_color__bad_56yom_113", A = "_color__label_56yom_118", C = "_info_56yom_123", D = "_success_56yom_128", E = "_warning_56yom_133", F = "_danger_56yom_138", o = {
+import '../assets/NoticeBox.css';const m = "_noticeBox_56yom_17", g = "_color__black_56yom_28", b = "_color__white_56yom_33", d = "_color__red_56yom_38", w = "_color__orange_56yom_43", p = "_color__yellow_56yom_48", u = "_color__olive_56yom_53", f = "_color__green_56yom_58", v = "_color__teal_56yom_63", x = "_color__blue_56yom_68", k = "_color__violet_56yom_73", B = "_color__purple_56yom_78", h = "_color__pink_56yom_83", N = "_color__brown_56yom_88", j = "_color__grey_56yom_93", q = "_color__good_56yom_103", z = "_color__average_56yom_108", A = "_color__bad_56yom_113", C = "_color__label_56yom_118", D = "_info_56yom_123", E = "_success_56yom_128", F = "_warning_56yom_133", G = "_danger_56yom_138", o = {
   noticeBox: m,
-  color__black: i,
-  color__white: g,
-  color__red: b,
-  color__orange: d,
+  color__black: g,
+  color__white: b,
+  color__red: d,
+  color__orange: w,
   color__yellow: p,
   color__olive: u,
-  color__green: w,
-  color__teal: f,
-  color__blue: v,
-  color__violet: x,
-  color__purple: k,
-  color__pink: B,
-  color__brown: h,
-  color__grey: N,
+  color__green: f,
+  color__teal: v,
+  color__blue: x,
+  color__violet: k,
+  color__purple: B,
+  color__pink: h,
+  color__brown: N,
+  color__grey: j,
   "color__light-grey": "_color__light-grey_56yom_98",
-  color__good: j,
-  color__average: q,
-  color__bad: z,
-  color__label: A,
-  info: C,
-  success: D,
-  warning: E,
-  danger: F
+  color__good: q,
+  color__average: z,
+  color__bad: A,
+  color__label: C,
+  info: D,
+  success: E,
+  warning: F,
+  danger: G
 };
-function J(c) {
-  const { className: r, color: _, info: l, success: e, danger: n, ...s } = c;
-  return /* @__PURE__ */ t(
+function K(c) {
+  const { className: r, color: _, info: l, success: e, warning: n, danger: s, ...t } = c;
+  return /* @__PURE__ */ a(
     y,
     {
-      className: a([
+      className: i([
         o.noticeBox,
         _ && o["color__" + _],
         l && o.info,
         e && o.success,
-        n && o.danger,
+        n && o.warning,
+        s && o.danger,
         r
       ]),
-      ...s
+      ...t
     }
   );
 }
 export {
-  J as NoticeBox
+  K as NoticeBox
 };

package/dist/components/NumberInput.js

@@ -1,26 +1,26 @@
-import '../assets/NumberInput.css';var w = Object.defineProperty;
-var E = (c, d, e) => d in c ? w(c, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[d] = e;
-var l = (c, d, e) => E(c, typeof d != "symbol" ? d + "" : d, e);
+import '../assets/NumberInput.css';var N = Object.defineProperty;
+var w = (c, d, e) => d in c ? N(c, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[d] = e;
+var l = (c, d, e) => w(c, typeof d != "symbol" ? d + "" : d, e);
 import { jsxs as _, jsx as g } from "react/jsx-runtime";
-import { Component as I, createRef as D } from "react";
-import { KEY as S } from "../common/keys.js";
+import { Component as E, createRef as I } from "react";
+import { KEY as D, isEscape as T } from "../common/keys.js";
 import { clamp as h } from "../common/math.js";
-import { classes as T } from "../common/react.js";
-import { AnimatedNumber as F } from "./AnimatedNumber.js";
-import { Box as M } from "./Box.js";
-const R = "_numberInput_4xyrw_20", B = "_fluid_4xyrw_36", K = "_content_4xyrw_40", L = "_barContainer_4xyrw_44", Y = "_bar_4xyrw_44", j = "_inner_4xyrw_61", p = {
-  numberInput: R,
-  fluid: B,
-  content: K,
-  barContainer: L,
-  bar: Y,
-  inner: j
+import { classes as F } from "../common/react.js";
+import { AnimatedNumber as M } from "./AnimatedNumber.js";
+import { Box as R } from "./Box.js";
+const B = "_numberInput_4xyrw_20", K = "_fluid_4xyrw_36", L = "_content_4xyrw_40", Y = "_barContainer_4xyrw_44", j = "_bar_4xyrw_44", k = "_inner_4xyrw_61", p = {
+  numberInput: B,
+  fluid: K,
+  content: L,
+  barContainer: Y,
+  bar: j,
+  inner: k
 };
-class $ extends I {
+class q extends E {
   constructor(e) {
     super(e);
     // Ref to the input field to set focus & highlight
-    l(this, "inputRef", D());
+    l(this, "inputRef", I());
     // After this time has elapsed we are in drag mode so no editing when dragging ends
     l(this, "dragTimeout");
     // Call onDrag at this interval
@@ -34,16 +34,16 @@ class $ extends I {
       origin: 0
     });
     l(this, "handleDragStart", (e) => {
-      const { value: a, disabled: u } = this.props, { editing: n } = this.state;
-      if (u || n)
+      const { value: a, disabled: u } = this.props, { editing: i } = this.state;
+      if (u || i)
         return;
       document.body.style["pointer-events"] = "none";
-      const i = parseFloat(a.toString());
+      const n = parseFloat(a.toString());
       this.setState({
         dragging: !1,
         origin: e.screenY,
-        currentValue: i,
-        previousValue: i
+        currentValue: n,
+        previousValue: n
       }), this.dragTimeout = setTimeout(() => {
         this.setState({
           dragging: !0
@@ -56,17 +56,17 @@ class $ extends I {
       }, 400), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd);
     });
     l(this, "handleDragMove", (e) => {
-      const { minValue: a, maxValue: u, step: n, stepPixelSize: i, disabled: o } = this.props;
+      const { minValue: a, maxValue: u, step: i, stepPixelSize: n, disabled: o } = this.props;
       o || this.setState((s) => {
         const t = { ...s }, r = t.origin - e.screenY;
         if (s.dragging) {
-          const f = isFinite(a) ? a % n : 0;
+          const f = isFinite(a) ? a % i : 0;
           t.currentValue = h(
-            t.currentValue + r * n / (i || 1),
-            a - n,
-            u + n
+            t.currentValue + r * i / (n || 1),
+            a - i,
+            u + i
           ), t.currentValue = h(
-            t.currentValue - t.currentValue % n + f,
+            t.currentValue - t.currentValue % i + f,
             a,
             u
           ), t.origin = e.screenY;
@@ -75,14 +75,14 @@ class $ extends I {
       });
     });
     l(this, "handleDragEnd", (e) => {
-      const { dragging: a, currentValue: u } = this.state, { onDrag: n, onChange: i, disabled: o } = this.props;
+      const { dragging: a, currentValue: u } = this.state, { onDrag: i, onChange: n, disabled: o } = this.props;
       if (!o) {
         if (document.body.style["pointer-events"] = "auto", clearInterval(this.dragInterval), clearTimeout(this.dragTimeout), this.setState({
           dragging: !1,
           editing: !a,
           previousValue: u
         }), a)
-          i == null || i(u), n == null || n(u);
+          n == null || n(u), i == null || i(u);
         else if (this.inputRef) {
           const s = this.inputRef.current;
           s && (s.value = `${u}`, setTimeout(() => {
@@ -93,13 +93,13 @@ class $ extends I {
       }
     });
     l(this, "handleBlur", (e) => {
-      const { editing: a, previousValue: u } = this.state, { minValue: n, maxValue: i, onChange: o, onDrag: s, disabled: t } = this.props;
+      const { editing: a, previousValue: u } = this.state, { minValue: i, maxValue: n, onChange: o, onDrag: s, disabled: t } = this.props;
       if (t || !a)
         return;
       const r = h(
         parseFloat(e.target.value),
-        n,
-        i
+        i,
+        n
       );
       if (isNaN(r)) {
         this.setState({
@@ -114,11 +114,11 @@ class $ extends I {
       }), u !== r && (o == null || o(r), s == null || s(r));
     });
     l(this, "handleKeyDown", (e) => {
-      const { minValue: a, maxValue: u, onChange: n, onDrag: i, disabled: o } = this.props;
+      const { minValue: a, maxValue: u, onChange: i, onDrag: n, disabled: o } = this.props;
       if (o)
         return;
       const { previousValue: s } = this.state;
-      if (e.key === S.Enter) {
+      if (e.key === D.Enter) {
         const t = h(
           parseFloat(e.currentTarget.value),
           a,
@@ -134,8 +134,8 @@ class $ extends I {
           editing: !1,
           currentValue: t,
           previousValue: t
-        }), s !== t && (n == null || n(t), i == null || i(t));
-      } else e.key === S.Escape && this.setState({
+        }), s !== t && (i == null || i(t), n == null || n(t));
+      } else T(e.key) && this.setState({
         editing: !1
       });
     });
@@ -149,34 +149,34 @@ class $ extends I {
   }
   render() {
     const { dragging: e, editing: a, currentValue: u } = this.state, {
-      className: n,
-      fluid: i,
+      className: i,
+      fluid: n,
       animated: o,
       unit: s,
       value: t,
       minValue: r,
       maxValue: f,
       height: v,
-      width: x,
+      width: S,
       lineHeight: b,
       fontSize: y,
       format: V
     } = this.props;
     let m = parseFloat(t.toString());
     e && (m = u);
-    const N = /* @__PURE__ */ _("div", { className: p.content, children: [
-      o && !e ? /* @__PURE__ */ g(F, { value: m, format: V }) : V ? V(m) : m,
+    const x = /* @__PURE__ */ _("div", { className: p.content, children: [
+      o && !e ? /* @__PURE__ */ g(M, { value: m, format: V }) : V ? V(m) : m,
       s ? " " + s : ""
     ] });
     return /* @__PURE__ */ _(
-      M,
+      R,
       {
-        className: T([
+        className: F([
           p.numberInput,
-          i && p.fluid,
-          n
+          n && p.fluid,
+          i
         ]),
-        minWidth: x,
+        minWidth: S,
         minHeight: v,
         lineHeight: b,
         fontSize: y,
@@ -195,7 +195,7 @@ class $ extends I {
               }
             }
           ) }),
-          N,
+          x,
           /* @__PURE__ */ g(
             "input",
             {
@@ -217,5 +217,5 @@ class $ extends I {
   }
 }
 export {
-  $ as NumberInput
+  q as NumberInput
 };

package/dist/components/Section.d.ts

@@ -1,5 +1,30 @@
 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.
@@ -27,37 +52,5 @@ import { ReactNode } from 'react';
  * </Section>
  * ```
  */
-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;
-    /** @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;
-    /** Title of the section. */
-    title: ReactNode;
-}> & Partial<{
-    as: string;
-    children: ReactNode;
-    className: string | import('../common/react').BooleanLike;
-    style: import('react').CSSProperties;
-}> & Partial<Record<"bold" | "italic" | "nowrap" | "fillPositionedParent" | "inline" | "preserveWhitespace", boolean>> & Partial<Record<"fontWeight" | "textAlign" | "bottom" | "fontFamily" | "fontSize" | "height" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "overflowX" | "overflowY" | "position" | "right" | "top" | "verticalAlign" | "width" | "color" | "backgroundColor" | "align" | "lineHeight" | "m" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "textColor", string | import('../common/react').BooleanLike>> & Partial<{
-    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>;
-    onMouseMove: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseOver: import('react').MouseEventHandler<HTMLDivElement>;
-    onMouseUp: import('react').MouseEventHandler<HTMLDivElement>;
-    onScroll: import('react').UIEventHandler<HTMLDivElement>;
-}> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Section: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};