tgui-core 1.7.6 → 1.8.1

package/dist/common/collections.d.ts

@@ -7,4 +7,11 @@ type Zip<T extends unknown[][]> = {
  * the second elements of the given arrays, and so on.
  */
 export declare function zip<T extends unknown[][]>(...arr: T): Zip<T>;
+/**
+ * Helper function for string compares with native sorts
+ * @param a first string to compare
+ * @param b second string to compare
+ * @returns -1 for a < b, 1 for a > b and 0 otherwise
+ */
+export declare function stringCompare(a: string, b: string): 0 | 1 | -1;
 export {};

package/dist/common/collections.js

@@ -1,6 +1,10 @@
-function m(...a) {
-  return Array(Math.max(...a.map((p) => p.length))).fill(void 0).map((p, t) => a.map((i) => i[t]));
+function p(...n) {
+  return Array(Math.max(...n.map((t) => t.length))).fill(void 0).map((t, r) => n.map((i) => i[r]));
+}
+function a(n, t) {
+  return n < t ? -1 : n > t ? 1 : 0;
 }
 export {
-  m as zip
+  a as stringCompare,
+  p as zip
 };

package/dist/common/ui.js

@@ -1,61 +1,61 @@
 import { CSS_COLORS as u } from "./constants.js";
 import { classes as y } from "./react.js";
-const f = (o) => {
-  if (typeof o == "string")
-    return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
-  if (typeof o == "number")
-    return `${o}rem`;
-}, p = (o) => {
-  if (typeof o == "string")
-    return f(o);
-  if (typeof o == "number")
-    return f(o * 0.5);
+const f = (t) => {
+  if (typeof t == "string")
+    return t.endsWith("px") ? `${Number.parseFloat(t) / 12}rem` : t;
+  if (typeof t == "number")
+    return `${t}rem`;
+}, p = (t) => {
+  if (typeof t == "string")
+    return f(t);
+  if (typeof t == "number")
+    return f(t * 0.5);
 };
-function w(o) {
-  return !h(o);
+function w(t) {
+  return !h(t);
 }
-function h(o) {
-  return typeof o == "string" && u.includes(o);
+function h(t) {
+  return typeof t == "string" && u.includes(t);
 }
-const c = (o) => (t, i) => {
-  (typeof i == "number" || typeof i == "string") && (t[o] = i);
-}, n = (o, t) => (i, e) => {
-  (typeof e == "number" || typeof e == "string") && (i[o] = t(e));
-}, l = (o, t) => (i, e) => {
-  e && (i[o] = t);
-}, s = (o, t, i) => (e, r) => {
+const l = (t) => (o, i) => {
+  (typeof i == "number" || typeof i == "string") && (o[t] = i);
+}, n = (t, o) => (i, e) => {
+  (typeof e == "number" || typeof e == "string") && (i[t] = o(e));
+}, s = (t, o) => (i, e) => {
+  e && (i[t] = o);
+}, c = (t, o, i) => (e, r) => {
   if (typeof r == "number" || typeof r == "string")
     for (let m = 0; m < i.length; m++)
-      e[o + i[m]] = t(r);
-}, a = (o) => (t, i) => {
-  w(i) && (t[o] = i);
+      e[t + i[m]] = o(r);
+}, a = (t) => (o, i) => {
+  w(i) && (o[t] = i);
 }, d = {
-  align: c("textAlign"),
+  align: l("textAlign"),
   bottom: n("bottom", f),
-  fontFamily: c("fontFamily"),
+  fontFamily: l("fontFamily"),
   fontSize: n("fontSize", f),
-  fontWeight: c("fontWeight"),
+  fontWeight: l("fontWeight"),
   height: n("height", f),
   left: n("left", f),
   maxHeight: n("maxHeight", f),
   maxWidth: n("maxWidth", f),
   minHeight: n("minHeight", f),
   minWidth: n("minWidth", f),
-  opacity: c("opacity"),
-  overflow: c("overflow"),
-  overflowX: c("overflowX"),
-  overflowY: c("overflowY"),
-  position: c("position"),
+  opacity: l("opacity"),
+  overflow: l("overflow"),
+  overflowX: l("overflowX"),
+  overflowY: l("overflowY"),
+  position: l("position"),
   right: n("right", f),
-  textAlign: c("textAlign"),
+  textAlign: l("textAlign"),
   top: n("top", f),
-  verticalAlign: c("verticalAlign"),
+  verticalAlign: l("verticalAlign"),
   width: n("width", f),
-  lineHeight: (o, t) => {
-    typeof t == "number" ? o.lineHeight = t : typeof t == "string" && (o.lineHeight = f(t));
+  lineHeight: (t, o) => {
+    typeof o == "number" ? t.lineHeight = o : typeof o == "string" && (t.lineHeight = f(o));
   },
   // Margin
-  m: s("margin", p, [
+  m: c("margin", p, [
     "Top",
     "Bottom",
     "Left",
@@ -65,10 +65,10 @@ const c = (o) => (t, i) => {
   ml: n("marginLeft", p),
   mr: n("marginRight", p),
   mt: n("marginTop", p),
-  mx: s("margin", p, ["Left", "Right"]),
-  my: s("margin", p, ["Top", "Bottom"]),
+  mx: c("margin", p, ["left", "right"]),
+  my: c("margin", p, ["top", "bottom"]),
   // Padding
-  p: s("padding", p, [
+  p: c("padding", p, [
     "Top",
     "Bottom",
     "Left",
@@ -78,58 +78,58 @@ const c = (o) => (t, i) => {
   pl: n("paddingLeft", p),
   pr: n("paddingRight", p),
   pt: n("paddingTop", p),
-  px: s("padding", p, ["Left", "Right"]),
-  py: s("padding", p, ["Top", "Bottom"]),
+  px: c("padding", p, ["left", "right"]),
+  py: c("padding", p, ["top", "bottom"]),
   // Color props
   color: a("color"),
   textColor: a("color"),
   backgroundColor: a("backgroundColor")
 }, b = {
-  bold: l("fontWeight", "bold"),
-  fillPositionedParent: (o, t) => {
-    t && (o.position = "absolute", o.top = 0, o.bottom = 0, o.left = 0, o.right = 0);
+  bold: s("fontWeight", "bold"),
+  fillPositionedParent: (t, o) => {
+    o && (t.position = "absolute", t.top = 0, t.bottom = 0, t.left = 0, t.right = 0);
   },
-  inline: l("display", "inline-block"),
-  italic: l("fontStyle", "italic"),
-  nowrap: l("whiteSpace", "nowrap"),
-  preserveWhitespace: l("whiteSpace", "pre-wrap")
+  inline: s("display", "inline-block"),
+  italic: s("fontStyle", "italic"),
+  nowrap: s("whiteSpace", "nowrap"),
+  preserveWhitespace: s("whiteSpace", "pre-wrap")
 };
-function T(o) {
-  const t = {}, i = {};
-  for (const e in o) {
+function S(t) {
+  const o = {}, i = {};
+  for (const e in t) {
     if (e === "style")
       continue;
-    const r = o[e], m = d[e] || b[e];
-    m ? m(i, r) : t[e] = r;
+    const r = t[e], m = d[e] || b[e];
+    m ? m(i, r) : o[e] = r;
   }
-  return t.style = { ...i, ...o.style }, t;
+  return o.style = { ...i, ...t.style }, o;
 }
-function S(o) {
-  const t = o.textColor || o.color, { backgroundColor: i } = o;
+function T(t) {
+  const o = t.textColor || t.color, { backgroundColor: i } = t;
   return y([
-    h(t) && `color-${t}`,
+    h(o) && `color-${o}`,
     h(i) && `color-bg-${i}`
   ]);
 }
-function P(o) {
-  const t = {};
-  if (!o) return t;
-  const i = o.split(" ");
+function P(t) {
+  const o = {};
+  if (!t) return o;
+  const i = t.split(" ");
   for (const e of i) {
     const [r, m] = e.split("-");
     if (r)
       if (r in d) {
         if (m === "") continue;
         const g = Number(m);
-        !Number.isNaN(g) && Number.isFinite(g) ? t[r] = g : t[r] = m;
-      } else r in b ? t[r] = !0 : console.warn(`Unknown prop ${r}`);
+        !Number.isNaN(g) && Number.isFinite(g) ? o[r] = g : o[r] = m;
+      } else r in b ? o[r] = !0 : console.warn(`Unknown prop ${r}`);
   }
-  return t;
+  return o;
 }
 export {
   b as booleanStyleMap,
-  S as computeBoxClassName,
-  T as computeBoxProps,
+  T as computeBoxClassName,
+  S as computeBoxProps,
   P as computeTwClass,
   p as halfUnit,
   d as stringStyleMap,

package/dist/components/Input.js

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

package/dist/components/MenuBar.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import { useRef as B, useEffect as h } from "react";
-import { classes as _ } from "../common/react.js";
+import { classes as p } from "../common/react.js";
 import { Box as l } from "./Box.js";
 import { Icon as v } from "./Icon.js";
 function k(n) {
@@ -34,12 +34,12 @@ function N(n) {
     openWidth: s,
     onOutsideClick: m,
     ...M
-  } = n, f = B(null);
-  return /* @__PURE__ */ p("div", { ref: f, children: [
+  } = n, _ = B(null);
+  return /* @__PURE__ */ f("div", { ref: _, children: [
     /* @__PURE__ */ t(
       l,
       {
-        className: _([
+        className: p([
           "MenuBar__MenuBarButton",
           "MenuBar__font",
           "MenuBar__hover",
@@ -55,7 +55,7 @@ function N(n) {
       k,
       {
         width: s,
-        menuRef: this.menuRef,
+        menuRef: _,
         onOutsideClick: m,
         children: e
       }
@@ -99,10 +99,10 @@ function d(n) {
 O.Dropdown = d;
 function g(n) {
   const { value: e, displayText: o, onClick: r, checked: a } = n;
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     l,
     {
-      className: _([
+      className: p([
         "MenuBar__font",
         "MenuBar__MenuItem",
         "MenuBar__MenuItemToggle",
@@ -122,7 +122,7 @@ function C(n) {
   return /* @__PURE__ */ t(
     l,
     {
-      className: _([
+      className: p([
         "MenuBar__font",
         "MenuBar__MenuItem",
         "MenuBar__hover"

package/dist/components/TextArea.d.ts

@@ -18,6 +18,8 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     placeholder: string;
     scrollbar: boolean;
     selfClear: boolean;
+    /** Provides a Record with key: markupChar entries which can be used for ctrl + key combinations to surround a selected text with the markup character */
+    userMarkup: Record<string, string>;
     value: string;
 }> & Partial<{
     as: string;

package/dist/components/TextArea.js

@@ -1,73 +1,87 @@
-import { jsxs as B, jsx as i } from "react/jsx-runtime";
-import { forwardRef as F, useRef as I, useState as Y, useImperativeHandle as C, useEffect as x } from "react";
-import { KEY as p, isEscape as H } from "../common/keys.js";
-import { classes as f } from "../common/react.js";
-import { Box as L } from "./Box.js";
-import { toInputValue as g } from "./Input.js";
-const M = F(
-  (b, h) => {
+import { jsxs as I, jsx as x } from "react/jsx-runtime";
+import { forwardRef as M, useRef as Y, useState as C, useImperativeHandle as H, useEffect as y } from "react";
+import { KEY as A, isEscape as L } from "../common/keys.js";
+import { classes as p } from "../common/react.js";
+import { Box as U } from "./Box.js";
+import { toInputValue as _ } from "./Input.js";
+function q(u, s, l, t) {
+  return `${u.substring(0, l)}${s}${u.substring(l, t)}${s}${u.substring(t)}`;
+}
+const X = M(
+  (u, s) => {
     const {
-      autoFocus: d,
-      autoSelect: o,
-      displayedValue: a,
-      dontUseTabForIndent: A,
-      maxLength: _,
-      noborder: y,
-      onChange: l,
-      onEnter: u,
-      onEscape: s,
-      onInput: c,
-      placeholder: w,
-      scrollbar: S,
-      selfClear: m,
-      value: n,
-      ...E
-    } = b, { className: K, fluid: N, nowrap: k, ...D } = E, e = I(null), [R, V] = Y(0);
-    function $(r) {
-      if (r.key === p.Enter) {
+      autoFocus: l,
+      autoSelect: t,
+      displayedValue: o,
+      dontUseTabForIndent: w,
+      maxLength: S,
+      noborder: $,
+      onChange: i,
+      onEnter: f,
+      onEscape: g,
+      onInput: d,
+      placeholder: k,
+      scrollbar: E,
+      selfClear: b,
+      userMarkup: m,
+      value: T,
+      ...K
+    } = u, { className: D, fluid: N, nowrap: R, ...V } = K, a = Y(null), [j, B] = C(0);
+    function F(r) {
+      if (r.key === A.Enter) {
         if (r.shiftKey) {
           r.currentTarget.focus();
           return;
         }
-        u == null || u(r, r.currentTarget.value), m && (r.currentTarget.value = ""), r.currentTarget.blur();
+        f == null || f(r, r.currentTarget.value), b && (r.currentTarget.value = ""), r.currentTarget.blur();
         return;
       }
-      if (H(r.key)) {
-        s == null || s(r), m ? r.currentTarget.value = "" : (r.currentTarget.value = g(n), r.currentTarget.blur());
+      if (L(r.key)) {
+        g == null || g(r), b ? r.currentTarget.value = "" : (r.currentTarget.value = _(T), r.currentTarget.blur());
         return;
       }
-      if (!A && r.key === p.Tab) {
+      if (!w && r.key === A.Tab) {
         r.preventDefault();
-        const { value: t, selectionStart: T, selectionEnd: j } = r.currentTarget;
-        r.currentTarget.value = `${t.substring(0, T)}	${t.substring(j)}`, r.currentTarget.selectionEnd = T + 1;
+        const { value: e, selectionStart: c, selectionEnd: n } = r.currentTarget;
+        r.currentTarget.value = `${e.substring(0, c)}	${e.substring(n)}`, r.currentTarget.selectionEnd = c + 1;
+      }
+      if (m && (r.ctrlKey || r.metaKey) && m[r.key]) {
+        r.preventDefault();
+        const { value: e, selectionStart: c, selectionEnd: n } = r.currentTarget, h = m[r.key];
+        r.currentTarget.value = q(
+          e,
+          h,
+          c,
+          n
+        ), r.currentTarget.selectionEnd = n + h.length * 2;
       }
     }
-    return C(
-      h,
-      () => e.current
-    ), x(() => {
-      if (!d && !o) return;
-      const r = e.current;
-      r && (d || o) && setTimeout(() => {
-        r.focus(), o && r.select();
+    return H(
+      s,
+      () => a.current
+    ), y(() => {
+      if (!l && !t) return;
+      const r = a.current;
+      r && (l || t) && setTimeout(() => {
+        r.focus(), t && r.select();
       }, 1);
-    }, []), x(() => {
-      const r = e.current;
+    }, []), y(() => {
+      const r = a.current;
       if (!r) return;
-      const t = g(n);
-      r.value !== t && (r.value = t);
-    }, [n]), /* @__PURE__ */ B(
-      L,
+      const e = _(T);
+      r.value !== e && (r.value = e);
+    }, [T]), /* @__PURE__ */ I(
+      U,
       {
-        className: f([
+        className: p([
           "TextArea",
           N && "TextArea--fluid",
-          y && "TextArea--noborder",
-          K
+          $ && "TextArea--noborder",
+          D
         ]),
-        ...D,
+        ...V,
         children: [
-          !!a && /* @__PURE__ */ i(
+          !!o && /* @__PURE__ */ x(
             "div",
             {
               style: {
@@ -76,40 +90,40 @@ const M = F(
                 position: "absolute",
                 width: "100%"
               },
-              children: /* @__PURE__ */ i(
+              children: /* @__PURE__ */ x(
                 "div",
                 {
-                  className: f([
+                  className: p([
                     "TextArea__textarea",
                     "TextArea__textarea_custom"
                   ]),
                   style: {
-                    transform: `translateY(-${R}px)`
+                    transform: `translateY(-${j}px)`
                   },
-                  children: a
+                  children: o
                 }
               )
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ x(
             "textarea",
             {
-              className: f([
+              className: p([
                 "TextArea__textarea",
-                S && "TextArea__textarea--scrollable",
-                k && "TextArea__nowrap"
+                E && "TextArea__textarea--scrollable",
+                R && "TextArea__nowrap"
               ]),
-              maxLength: _,
-              onBlur: (r) => l == null ? void 0 : l(r, r.target.value),
-              onChange: (r) => c == null ? void 0 : c(r, r.target.value),
-              onKeyDown: $,
+              maxLength: S,
+              onBlur: (r) => i == null ? void 0 : i(r, r.target.value),
+              onChange: (r) => d == null ? void 0 : d(r, r.target.value),
+              onKeyDown: F,
               onScroll: () => {
-                a && e.current && V(e.current.scrollTop);
+                o && a.current && B(a.current.scrollTop);
               },
-              placeholder: w,
-              ref: e,
+              placeholder: k,
+              ref: a,
               style: {
-                color: a ? "rgba(0, 0, 0, 0)" : "inherit"
+                color: o ? "rgba(0, 0, 0, 0)" : "inherit"
               }
             }
           )
@@ -119,5 +133,5 @@ const M = F(
   }
 );
 export {
-  M as TextArea
+  X as TextArea
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.7.6",
+  "version": "1.8.1",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],