tgui-core 1.2.0 → 1.3.0

package/dist/components/Dialog.js

@@ -1,22 +1,13 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { Box as s } from "./Box.js";
-import { Button as a } from "./Button.js";
-import '../assets/Dialog.css';const m = "_dialog_1hdv8_5", v = "_content_1hdv8_17", u = "_header_1hdv8_25", g = "_title_1hdv8_33", p = "_body_1hdv8_42", C = "_footer_1hdv8_47", f = "_button_1hdv8_55", o = {
-  dialog: m,
-  content: v,
-  header: u,
-  title: g,
-  body: p,
-  footer: C,
-  button: f
-};
-function h(n) {
-  const { title: e, onClose: i, children: r, width: l, height: _ } = n;
-  return /* @__PURE__ */ t("div", { className: o.dialog, children: /* @__PURE__ */ c(s, { className: o.content, width: l || "370px", height: _, children: [
-    /* @__PURE__ */ c("div", { className: o.header, children: [
-      /* @__PURE__ */ t("div", { className: o.title, children: e }),
-      /* @__PURE__ */ t(s, { mr: 2, children: /* @__PURE__ */ t(
-        a,
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import { Box as r } from "./Box.js";
+import { Button as s } from "./Button.js";
+function d(i) {
+  const { title: n, onClose: t, children: c, width: l, height: h } = i;
+  return /* @__PURE__ */ o("div", { className: "Dialog", children: /* @__PURE__ */ e(r, { className: "Dialog__content", width: l || "370px", height: h, children: [
+    /* @__PURE__ */ e("div", { className: "Dialog__header", children: [
+      /* @__PURE__ */ o("div", { className: "Dialog__title", children: n }),
+      /* @__PURE__ */ o(r, { mr: 2, children: /* @__PURE__ */ o(
+        s,
         {
           mr: "-3px",
           width: "26px",
@@ -26,42 +17,42 @@ function h(n) {
           icon: "window-close-o",
           tooltip: "Close",
           tooltipPosition: "bottom-start",
-          onClick: i
+          onClick: t
         }
       ) })
     ] }),
-    r
+    c
   ] }) });
 }
-function d(n) {
-  const { onClick: e, children: i } = n;
-  return /* @__PURE__ */ t(
-    a,
+function a(i) {
+  const { onClick: n, children: t } = i;
+  return /* @__PURE__ */ o(
+    s,
     {
-      onClick: e,
-      className: o.button,
+      onClick: n,
+      className: "Dialog__button",
       verticalAlignContent: "middle",
-      children: i
+      children: t
     }
   );
 }
-h.Button = d;
-function w(n) {
-  const { documentName: e, onSave: i, onDiscard: r, onClose: l } = n;
-  return /* @__PURE__ */ c(h, { title: "Notepad", onClose: l, children: [
-    /* @__PURE__ */ c("div", { className: o.body, children: [
+d.Button = a;
+function p(i) {
+  const { documentName: n, onSave: t, onDiscard: c, onClose: l } = i;
+  return /* @__PURE__ */ e(d, { title: "Notepad", onClose: l, children: [
+    /* @__PURE__ */ e("div", { className: "Dialog__body", children: [
       "Do you want to save changes to ",
-      e,
+      n,
       "?"
     ] }),
-    /* @__PURE__ */ c("div", { className: o.footer, children: [
-      /* @__PURE__ */ t(d, { onClick: i, children: "Save" }),
-      /* @__PURE__ */ t(d, { onClick: r, children: "Don't Save" }),
-      /* @__PURE__ */ t(d, { onClick: l, children: "Cancel" })
+    /* @__PURE__ */ e("div", { className: "Dialog__footer", children: [
+      /* @__PURE__ */ o(a, { onClick: t, children: "Save" }),
+      /* @__PURE__ */ o(a, { onClick: c, children: "Don't Save" }),
+      /* @__PURE__ */ o(a, { onClick: l, children: "Cancel" })
     ] })
   ] });
 }
 export {
-  h as Dialog,
-  w as UnsavedChangesDialog
+  d as Dialog,
+  p as UnsavedChangesDialog
 };

package/dist/components/Dimmer.d.ts

@@ -1,3 +1,2 @@
 import { BoxProps } from './Box';
-
 export declare function Dimmer(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dimmer.js

@@ -1,13 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { classes as o } from "../common/react.js";
-import { Box as t } from "./Box.js";
-import '../assets/Dimmer.css';const c = "_dimmer_ldz2o_5", n = {
-  dimmer: c
-};
-function _(r) {
-  const { className: e, children: s, ...i } = r;
-  return /* @__PURE__ */ m(t, { className: o([n.dimmer, e]), ...i, children: /* @__PURE__ */ m("div", { className: "Dimmer__inner", children: s }) });
+import { Box as c } from "./Box.js";
+function l(m) {
+  const { className: e, children: s, ...i } = m;
+  return /* @__PURE__ */ r(c, { className: o(["Dimmer", e]), ...i, children: /* @__PURE__ */ r("div", { className: "Dimmer__inner", children: s }) });
 }
 export {
-  _ as Dimmer
+  l as Dimmer
 };

package/dist/components/Divider.js

@@ -1,22 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { classes as e } from "../common/react.js";
-import '../assets/Divider.css';const d = "_horizontal_1dhv5_9", c = "_hidden_1dhv5_12", s = "_vertical_1dhv5_16", i = {
-  horizontal: d,
-  hidden: c,
-  vertical: s
-};
-function l(t) {
-  const { hidden: o, vertical: n } = t;
-  return /* @__PURE__ */ r(
+import { jsx as d } from "react/jsx-runtime";
+import { classes as o } from "../common/react.js";
+function n(i) {
+  const { hidden: r, vertical: e } = i;
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: e([
-        o && i.hidden,
-        n ? i.vertical : i.horizontal
+      className: o([
+        "Divider",
+        r && "Divider--hidden",
+        e ? "Divider--vertical" : "Divider--horizontal"
       ])
     }
   );
 }
 export {
-  l as Divider
+  n as Divider
 };

package/dist/components/DmIcon.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { BoxProps } from './Box';
-
 declare enum Direction {
     NORTH = 1,
     SOUTH = 2,

package/dist/components/DraggableControl.js

@@ -1,14 +1,14 @@
-import { jsxs as T, Fragment as N, jsx as F } from "react/jsx-runtime";
-import { clamp as m } from "../common/math.js";
-import { Component as b, createRef as I } from "react";
+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 S(v, u) {
+function N(v, u) {
   return v.screenX * u[0] + v.screenY * u[1];
 }
-class C extends b {
+class C extends x {
   constructor(u) {
-    super(u), this.inputRef = I(), this.state = {
+    super(u), this.inputRef = y(), this.state = {
       value: u.value,
       dragging: !1,
       editing: !1,
@@ -28,7 +28,7 @@ class C extends b {
       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: S(e, l),
+        origin: N(e, l),
         value: i,
         internalValue: i
       }), this.timer = setTimeout(() => {
@@ -36,26 +36,26 @@ class C extends b {
           dragging: !0
         });
       }, 250), this.dragInterval = setInterval(() => {
-        const { dragging: o, value: g } = this.state, { onDrag: a } = this.props;
-        o && a && a(e, g);
+        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((a) => {
-        const n = { ...a }, p = S(e, g) - n.origin;
-        if (a.dragging) {
+      this.setState((r) => {
+        const a = { ...r }, p = N(e, g) - a.origin;
+        if (r.dragging) {
           const h = Number.isFinite(i) ? i % s : 0;
-          n.internalValue = m(
-            n.internalValue + p * s / o,
+          a.internalValue = c(
+            a.internalValue + p * s / o,
             i - s,
             l + s
-          ), n.value = m(
-            n.internalValue - n.internalValue % s + h,
+          ), a.value = c(
+            a.internalValue - a.internalValue % s + h,
             i,
             l
-          ), n.origin = S(e, g);
-        } else Math.abs(p) > 4 && (n.dragging = !0);
-        return n;
+          ), 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;
@@ -66,9 +66,9 @@ class C extends b {
       }), 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 a = this.inputRef.current;
-        a.value = g, setTimeout(() => {
-          a.focus(), a.select();
+        const r = this.inputRef.current;
+        r.value = g, setTimeout(() => {
+          r.focus(), r.select();
         }, 10);
       }
     };
@@ -83,39 +83,43 @@ class C extends b {
       animated: s,
       value: o,
       unit: g,
-      minValue: a,
-      maxValue: n,
+      minValue: r,
+      maxValue: a,
       unclamped: p,
       format: h,
-      onChange: f,
-      onDrag: c,
-      children: D,
+      onChange: m,
+      onDrag: f,
+      children: S,
       // Input props
-      height: k,
-      lineHeight: V,
-      fontSize: y
+      height: V,
+      lineHeight: D,
+      fontSize: b
     } = this.props;
     let d = o;
     (u || l) && (d = i);
-    const E = /* @__PURE__ */ T(N, { children: [
+    const k = /* @__PURE__ */ T(I, { children: [
       s && !u && !l ? /* @__PURE__ */ F(M, { value: d, format: h }) : h ? h(d) : d,
-      g ? " " + g : ""
-    ] }), x = /* @__PURE__ */ F(
+      g ? ` ${g}` : ""
+    ] }), E = /* @__PURE__ */ F(
       "input",
       {
         ref: this.inputRef,
         className: "NumberInput__input",
         style: {
           display: e ? void 0 : "none",
-          height: k,
-          lineHeight: V,
-          fontsize: y
+          height: V,
+          lineHeight: D,
+          fontsize: b
         },
-        onBlur: (r) => {
+        onBlur: (n) => {
           if (!e)
             return;
           let t;
-          if (p ? t = parseFloat(r.target.value) : t = m(parseFloat(r.target.value), a, n), Number.isNaN(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
             });
@@ -124,12 +128,16 @@ class C extends b {
           this.setState({
             editing: !1,
             value: t
-          }), this.suppressFlicker(), f && f(r, t), c && c(r, t);
+          }), this.suppressFlicker(), m && m(n, t), f && f(n, t);
         },
-        onKeyDown: (r) => {
-          if (r.keyCode === 13) {
+        onKeyDown: (n) => {
+          if (n.keyCode === 13) {
             let t;
-            if (p ? t = parseFloat(r.target.value) : t = m(parseFloat(r.target.value), a, n), Number.isNaN(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
               });
@@ -138,10 +146,10 @@ class C extends b {
             this.setState({
               editing: !1,
               value: t
-            }), this.suppressFlicker(), f && f(r, t), c && c(r, t);
+            }), this.suppressFlicker(), m && m(n, t), f && f(n, t);
             return;
           }
-          if (r.keyCode === 27) {
+          if (n.keyCode === 27) {
             this.setState({
               editing: !1
             });
@@ -150,20 +158,20 @@ class C extends b {
         }
       }
     );
-    return D({
+    return S({
       dragging: u,
       editing: e,
       value: o,
       displayValue: d,
-      displayElement: E,
-      inputElement: x,
+      displayElement: k,
+      inputElement: E,
       handleDragStart: this.handleDragStart
     });
   }
 }
 C.defaultProps = {
-  minValue: -1 / 0,
-  maxValue: 1 / 0,
+  minValue: Number.NEGATIVE_INFINITY,
+  maxValue: Number.POSITIVE_INFINITY,
   step: 1,
   stepPixelSize: 1,
   suppressFlicker: 50,

package/dist/components/Dropdown.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { BoxProps } from './Box';
-
 export type DropdownEntry = {
     displayText: ReactNode;
     value: string | number;

package/dist/components/Dropdown.js

@@ -1,141 +1,147 @@
-import { jsx as o, jsxs as m, Fragment as W } from "react/jsx-runtime";
-import { useState as F, useRef as L, useEffect as q } from "react";
-import { classes as y } from "../common/react.js";
-import { unit as z } from "./Box.js";
+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 { Button as D } from "./Button.js";
 import { Icon as b } from "./Icon.js";
-import { Popper as A } from "./Popper.js";
-const G = -1;
-function f(d) {
-  return typeof d == "string" ? d : d.value;
+import { Popper as q } from "./Popper.js";
+const z = -1;
+function h(u) {
+  return typeof u == "string" ? u : u.value;
 }
-function Y(d) {
+function X(u) {
   const {
-    autoScroll: w = !0,
+    autoScroll: v = !0,
     buttons: I,
     className: O,
     clipSelectedText: k = !0,
     color: B = "default",
-    disabled: a,
-    displayText: C,
+    disabled: d,
+    displayText: E,
     icon: x,
     iconRotation: T,
     iconSpin: j,
-    menuWidth: R = "15rem",
-    noChevron: S,
-    onClick: p,
-    onSelected: i,
-    options: r = [],
-    over: g,
-    placeholder: E = "Select...",
-    selected: u,
+    menuWidth: C = "15rem",
+    noChevron: R,
+    onClick: a,
+    onSelected: o,
+    options: c = [],
+    over: y,
+    placeholder: K = "Select...",
+    selected: m,
     width: P = "15rem"
-  } = d, [l, h] = F(!1), V = g ? !l : l, v = L(null), s = r.findIndex((e) => f(e) === u) || 0;
-  function _(e) {
-    var c;
-    let t = e;
-    e < s ? t = e < 2 ? 0 : e - 2 : t = e > r.length - 3 ? r.length - 1 : e - 2;
-    const n = (c = v.current) == null ? void 0 : c.children[t];
+  } = u, [r, f] = F(!1), V = y ? !r : r, w = L(null), i = c.findIndex((e) => h(e) === m) || 0;
+  function g(e) {
+    var t;
+    let s = e;
+    e < i ? s = e < 2 ? 0 : e - 2 : s = e > c.length - 3 ? c.length - 1 : e - 2;
+    const n = (t = w.current) == null ? void 0 : t.children[s];
     n == null || n.scrollIntoView({ block: "nearest" });
   }
-  function N(e) {
-    if (r.length < 1 || a)
+  function _(e) {
+    if (c.length < 1 || d)
       return;
-    const t = 0, n = r.length - 1;
-    let c;
-    s < 0 ? c = e === "next" ? n : t : e === "next" ? c = s === n ? t : s + 1 : c = s === t ? n : s - 1, l && w && _(c), i == null || i(f(r[c]));
+    const s = 0, n = c.length - 1;
+    let t;
+    i < 0 ? t = e === "next" ? n : s : e === "next" ? t = i === n ? s : i + 1 : t = i === s ? n : i - 1, r && v && g(t), o == null || o(h(c[t]));
   }
-  return q(() => {
+  return S(() => {
     var e;
-    l && (w && s !== G && _(s), (e = v.current) == null || e.focus());
-  }, [l]), /* @__PURE__ */ o(
-    A,
+    r && (v && i !== z && g(i), (e = w.current) == null || e.focus());
+  }, [r]), /* @__PURE__ */ l(
+    q,
     {
-      isOpen: l,
-      onClickOutside: () => h(!1),
-      placement: g ? "top-start" : "bottom-start",
-      content: /* @__PURE__ */ m(
+      isOpen: r,
+      onClickOutside: () => f(!1),
+      placement: y ? "top-start" : "bottom-start",
+      content: /* @__PURE__ */ p(
         "div",
         {
           className: "Layout Dropdown__menu",
-          style: { minWidth: R },
-          ref: v,
+          style: { minWidth: C },
+          ref: w,
           children: [
-            r.length === 0 && /* @__PURE__ */ o("div", { className: "Dropdown__menuentry", children: "No options" }),
-            r.map((e, t) => {
-              const n = f(e);
-              return /* @__PURE__ */ o(
+            c.length === 0 && /* @__PURE__ */ l("div", { className: "Dropdown__menuentry", children: "No options" }),
+            c.map((e, s) => {
+              const n = h(e);
+              return /* @__PURE__ */ l(
                 "div",
                 {
-                  className: y([
+                  className: N([
                     "Dropdown__menuentry",
-                    u === n && "selected"
+                    m === n && "selected"
                   ]),
                   onClick: () => {
-                    h(!1), i == null || i(n);
+                    f(!1), o == null || o(n);
+                  },
+                  onKeyDown: (t) => {
+                    t.key === "Enter" && (f(!1), o == null || o(n));
                   },
                   children: typeof e == "string" ? e : e.displayText
                 },
-                t
+                s
               );
             })
           ]
         }
       ),
-      children: /* @__PURE__ */ m("div", { className: "Dropdown", style: { width: z(P) }, children: [
-        /* @__PURE__ */ m(
+      children: /* @__PURE__ */ p("div", { className: "Dropdown", style: { width: $(P) }, children: [
+        /* @__PURE__ */ p(
           "div",
           {
-            className: y([
+            className: N([
               "Dropdown__control",
               "Button",
               "Button--dropdown",
-              "Button--color--" + B,
-              a && "Button--disabled",
+              `Button--color--${B}`,
+              d && "Button--disabled",
               O
             ]),
             onClick: (e) => {
-              a && !l || (h(!l), p == null || p(e));
+              d && !r || (f(!r), a == null || a(e));
+            },
+            onKeyDown: (e) => {
+              e.key === "Enter" && !d && (f(!r), a == null || a(e));
             },
             children: [
-              x && /* @__PURE__ */ o(b, { mr: 1, name: x, rotation: T, spin: j }),
-              /* @__PURE__ */ o(
+              x && /* @__PURE__ */ l(b, { mr: 1, name: x, rotation: T, spin: j }),
+              /* @__PURE__ */ l(
                 "span",
                 {
                   className: "Dropdown__selected-text",
                   style: {
                     overflow: k ? "hidden" : "visible"
                   },
-                  children: C || u && f(u) || E
+                  children: E || m && h(m) || K
                 }
               ),
-              !S && /* @__PURE__ */ o("span", { className: "Dropdown__arrow-button", children: /* @__PURE__ */ o(b, { name: V ? "chevron-up" : "chevron-down" }) })
+              !R && /* @__PURE__ */ l("span", { className: "Dropdown__arrow-button", children: /* @__PURE__ */ l(b, { name: V ? "chevron-up" : "chevron-down" }) })
             ]
           }
         ),
-        I && /* @__PURE__ */ m(W, { children: [
-          /* @__PURE__ */ o(
+        I && /* @__PURE__ */ p(W, { children: [
+          /* @__PURE__ */ l(
             D,
             {
-              disabled: a,
+              disabled: d,
               height: 1.8,
               icon: "chevron-left",
               onClick: () => {
-                N(
+                _(
                   "previous"
                   /* Previous */
                 );
               }
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ l(
             D,
             {
-              disabled: a,
+              disabled: d,
               height: 1.8,
               icon: "chevron-right",
               onClick: () => {
-                N(
+                _(
                   "next"
                   /* Next */
                 );
@@ -148,5 +154,5 @@ function Y(d) {
   );
 }
 export {
-  Y as Dropdown
+  X as Dropdown
 };

package/dist/components/FitText.d.ts

@@ -1,5 +1,4 @@
 import { Component, HTMLAttributes, PropsWithChildren, RefObject } from 'react';
-
 type Props = {
     acceptableDifference?: number;
     maxFontSize: number;

package/dist/components/Flex.d.ts

@@ -1,5 +1,4 @@
 import { BoxProps } from './Box';
-
 export type FlexProps = Partial<{
     /**
      * Default alignment of all children.
@@ -60,6 +59,7 @@ export declare function Flex(props: any): import("react/jsx-runtime").JSX.Elemen
 export declare namespace Flex {
     var Item: typeof FlexItem;
 }
+export declare const computeFlexItemClassName: (props: FlexItemProps) => string;
 export type FlexItemProps = Partial<{
     /** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
     align: string | boolean;