tgui-core 1.8.0 → 1.8.2

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/Button.d.ts

@@ -43,6 +43,8 @@ type Props = Partial<{
     iconSize: number;
     /** Makes the icon spin */
     iconSpin: BooleanLike;
+    /** Called when the button is blurred */
+    onBlur: (e: any) => void;
     /** Called when element is clicked */
     onClick: (e: any) => void;
     /** Activates the button (gives it a green color) */

package/dist/components/Button.js

@@ -6,55 +6,55 @@ import { computeBoxClassName as j, computeBoxProps as q } from "../common/ui.js"
 import { Box as O } from "./Box.js";
 import { Icon as S } from "./Icon.js";
 import { Tooltip as v } from "./Tooltip.js";
-function N(o) {
+function R(e) {
   const {
-    captureKeys: s = !0,
-    children: u,
-    circular: m,
+    captureKeys: u = !0,
+    children: a,
+    circular: h,
     className: d,
-    color: l,
-    compact: h,
-    content: B,
+    color: c,
+    compact: B,
+    content: C,
     disabled: t,
-    ellipsis: i,
-    fluid: e,
-    icon: c,
-    iconColor: a,
-    iconPosition: C,
-    iconRotation: I,
-    iconSize: R,
+    ellipsis: o,
+    fluid: l,
+    icon: i,
+    iconColor: s,
+    iconPosition: y,
+    iconRotation: k,
+    iconSize: m,
     iconSpin: P,
     onClick: f,
-    selected: x,
-    tooltip: b,
+    selected: g,
+    tooltip: I,
     tooltipPosition: w,
-    verticalAlignContent: y,
-    ...g
-  } = o, n = B || u;
-  let k = /* @__PURE__ */ r(
+    verticalAlignContent: x,
+    ...N
+  } = e, n = C || a;
+  let b = /* @__PURE__ */ r(
     "div",
     {
       className: F([
         "Button",
-        e && "Button--fluid",
+        l && "Button--fluid",
         t && "Button--disabled",
-        x && "Button--selected",
-        m && "Button--circular",
-        h && "Button--compact",
-        C && `Button--iconPosition--${C}`,
-        y && "Button--flex",
-        y && e && "Button--flex--fluid",
-        y && `Button--verticalAlignContent--${y}`,
-        l && typeof l == "string" ? `Button--color--${l}` : "Button--color--default",
+        g && "Button--selected",
+        h && "Button--circular",
+        B && "Button--compact",
+        y && `Button--iconPosition--${y}`,
+        x && "Button--flex",
+        x && l && "Button--flex--fluid",
+        x && `Button--verticalAlignContent--${x}`,
+        c && typeof c == "string" ? `Button--color--${c}` : "Button--color--default",
         d,
-        j(g)
+        j(N)
       ]),
       tabIndex: t ? void 0 : 0,
       onClick: (p) => {
         !t && f && f(p);
       },
       onKeyDown: (p) => {
-        if (s) {
+        if (u) {
           if (p.key === D.Space || p.key === D.Enter) {
             p.preventDefault(), !t && f && f(p);
             return;
@@ -62,35 +62,35 @@ function N(o) {
           E(p.key) && p.preventDefault();
         }
       },
-      ...q(g),
+      ...q(N),
       children: /* @__PURE__ */ _(
         "div",
         {
           className: F([
             "Button__content",
-            i && "Button__content--ellipsis"
+            o && "Button__content--ellipsis"
           ]),
           children: [
-            c && C !== "right" && /* @__PURE__ */ r(
+            i && y !== "right" && /* @__PURE__ */ r(
               S,
               {
                 mr: n && 0.5,
-                name: c,
-                color: a,
-                rotation: I,
-                size: R,
+                name: i,
+                color: s,
+                rotation: k,
+                size: m,
                 spin: P
               }
             ),
-            i ? /* @__PURE__ */ r("span", { className: "Button--ellipsis", children: n }) : n,
-            c && C === "right" && /* @__PURE__ */ r(
+            o ? /* @__PURE__ */ r("span", { className: "Button--ellipsis", children: n }) : n,
+            i && y === "right" && /* @__PURE__ */ r(
               S,
               {
                 ml: n && 0.5,
-                name: c,
-                color: a,
-                rotation: I,
-                size: R,
+                name: i,
+                color: s,
+                rotation: k,
+                size: m,
                 spin: P
               }
             )
@@ -99,76 +99,81 @@ function N(o) {
       )
     }
   );
-  return b && (k = /* @__PURE__ */ r(v, { content: b, position: w, children: k })), k;
+  return I && (b = /* @__PURE__ */ r(v, { content: I, position: w, children: b })), b;
 }
-function T(o) {
-  const { checked: s, ...u } = o;
+function T(e) {
+  const { checked: u, ...a } = e;
   return /* @__PURE__ */ r(
-    N,
+    R,
     {
       color: "transparent",
-      icon: s ? "check-square-o" : "square-o",
-      selected: s,
-      ...u
+      icon: u ? "check-square-o" : "square-o",
+      selected: u,
+      ...a
     }
   );
 }
-function L(o) {
+function L(e) {
   const {
-    children: s,
-    color: u,
-    confirmColor: m = "bad",
+    children: u,
+    color: a,
+    confirmColor: h = "bad",
     confirmContent: d = "Confirm?",
-    confirmIcon: l,
-    ellipsis: h = !0,
-    icon: B,
-    onClick: t,
-    ...i
-  } = o, [e, c] = A(!1);
-  function a(C) {
-    if (!e) {
-      c(!0);
+    confirmIcon: c,
+    ellipsis: B = !0,
+    icon: C,
+    onBlur: t,
+    onClick: o,
+    ...l
+  } = e, [i, s] = A(!1);
+  function y(m) {
+    s(!1), t == null || t(m);
+  }
+  function k(m) {
+    if (!i) {
+      s(!0);
       return;
     }
-    t == null || t(C), c(!1);
+    o == null || o(m), s(!1);
   }
   return /* @__PURE__ */ r(
-    N,
+    R,
     {
-      icon: e ? l : B,
-      color: e ? m : u,
-      onClick: a,
-      ...i,
-      children: e ? d : s
+      icon: i ? c : C,
+      color: i ? h : a,
+      onBlur: y,
+      onClick: k,
+      ...l,
+      children: i ? d : u
     }
   );
 }
-function Y(o) {
+function Y(e) {
   const {
-    children: s,
-    color: u = "default",
-    content: m,
+    children: u,
+    color: a = "default",
+    content: h,
     currentValue: d,
-    defaultValue: l,
-    disabled: h,
-    fluid: B,
+    defaultValue: c,
+    disabled: B,
+    fluid: C,
     icon: t,
-    iconRotation: i,
-    iconSpin: e,
-    maxLength: c,
-    onCommit: a = () => null,
-    placeholder: C,
-    tooltip: I,
-    tooltipPosition: R,
+    iconRotation: o,
+    iconSpin: l,
+    maxLength: i,
+    onCommit: s = () => null,
+    placeholder: y,
+    tooltip: k,
+    tooltipPosition: m,
     ...P
-  } = o, [f, x] = A(!1), b = V(), w = m || s;
-  function y(n) {
-    const k = b.current;
-    if (!k) return;
-    k.value !== "" ? a(n, k.value) : l && a(n, l);
+  } = e, [f, g] = A(!1), I = V(), w = h || u;
+  function x(n) {
+    const b = I.current;
+    if (!b) return;
+    b.value !== "" ? s(n, b.value) : c && s(n, c);
   }
   $(() => {
-    const n = b.current;
+    const n = I.current;
     if (n && f) {
       n.value = d || "";
       try {
@@ -177,86 +182,86 @@ function Y(o) {
       }
     }
   }, [f, d]);
-  let g = /* @__PURE__ */ _(
+  let N = /* @__PURE__ */ _(
     O,
     {
       className: F([
         "Button",
-        B && "Button--fluid",
-        h && "Button--disabled",
-        `Button--color--${u}`
+        C && "Button--fluid",
+        B && "Button--disabled",
+        `Button--color--${a}`
       ]),
       ...P,
-      onClick: () => x(!0),
+      onClick: () => g(!0),
       children: [
-        t && /* @__PURE__ */ r(S, { name: t, rotation: i, spin: e }),
+        t && /* @__PURE__ */ r(S, { name: t, rotation: o, spin: l }),
         /* @__PURE__ */ r("div", { children: w }),
         /* @__PURE__ */ r(
           "input",
           {
-            disabled: !!h,
-            ref: b,
+            disabled: !!B,
+            ref: I,
             className: "NumberInput__input",
             style: {
               display: f ? "" : "none",
               textAlign: "left"
             },
             onBlur: (n) => {
-              f && (x(!1), y(n));
+              f && (g(!1), x(n));
             },
             onKeyDown: (n) => {
               if (n.key === D.Enter) {
-                x(!1), y(n);
+                g(!1), x(n);
                 return;
               }
-              E(n.key) && x(!1);
+              E(n.key) && g(!1);
             }
           }
         )
       ]
     }
   );
-  return I && (g = /* @__PURE__ */ r(v, { content: I, position: R, children: g })), g;
+  return k && (N = /* @__PURE__ */ r(v, { content: k, position: m, children: N })), N;
 }
-function G(o) {
-  const { accept: s, multiple: u, onSelectFiles: m, ...d } = o, l = z(null);
-  async function h(t) {
-    const i = Array.from(t).map((e) => {
-      const c = new FileReader();
-      return new Promise((a) => {
-        c.onload = () => a(c.result), c.readAsText(e);
+function G(e) {
+  const { accept: u, multiple: a, onSelectFiles: h, ...d } = e, c = z(null);
+  async function B(t) {
+    const o = Array.from(t).map((l) => {
+      const i = new FileReader();
+      return new Promise((s) => {
+        i.onload = () => s(i.result), i.readAsText(l);
       });
     });
-    return await Promise.all(i);
+    return await Promise.all(o);
   }
-  async function B(t) {
-    const i = t.target.files;
-    if (i != null && i.length) {
-      const e = await h(i);
-      m(u ? e : e[0]);
+  async function C(t) {
+    const o = t.target.files;
+    if (o != null && o.length) {
+      const l = await B(o);
+      h(a ? l : l[0]);
     }
   }
   return /* @__PURE__ */ _(K, { children: [
-    /* @__PURE__ */ r(N, { onClick: () => {
+    /* @__PURE__ */ r(R, { onClick: () => {
       var t;
-      return (t = l.current) == null ? void 0 : t.click();
+      return (t = c.current) == null ? void 0 : t.click();
     }, ...d }),
     /* @__PURE__ */ r(
       "input",
       {
         hidden: !0,
         type: "file",
-        ref: l,
-        accept: s,
-        multiple: u,
-        onChange: B
+        ref: c,
+        accept: u,
+        multiple: a,
+        onChange: C
       }
     )
   ] });
 }
-((o) => {
-  o.Checkbox = T, o.Confirm = L, o.Input = Y, o.File = G;
-})(N || (N = {}));
+((e) => {
+  e.Checkbox = T, e.Confirm = L, e.Input = Y, e.File = G;
+})(R || (R = {}));
 export {
-  N as Button
+  R as Button
 };

package/dist/components/MenuBar.js

@@ -1,22 +1,17 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { useRef as B, useEffect as h } from "react";
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { useRef as f } from "react";
 import { classes as _ } from "../common/react.js";
-import { Box as l } from "./Box.js";
-import { Icon as v } from "./Icon.js";
+import { Box as m } from "./Box.js";
+import { Icon as h } from "./Icon.js";
+import { Popper as v } from "./Popper.js";
 function k(n) {
-  const { children: e, menuRef: o, onOutsideClick: r, width: a } = n;
-  function u(i) {
-    var c;
-    (c = o.current) != null && c.contains(i.target) || r();
-  }
-  return h(() => (document.addEventListener("click", u), () => {
-    document.removeEventListener("click", u);
-  }), []), /* @__PURE__ */ t(
+  const { children: e, width: o } = n;
+  return /* @__PURE__ */ r(
     "div",
     {
       className: "Menubar__menu",
       style: {
-        width: a
+        width: o
       },
       children: e
     }
@@ -26,18 +21,18 @@ function N(n) {
   const {
     children: e,
     className: o,
-    disabled: r,
+    disabled: t,
     display: a,
     onClick: u,
-    onMouseOver: i,
+    onMouseOver: s,
     open: c,
-    openWidth: s,
-    onOutsideClick: m,
+    openWidth: l,
+    onOutsideClick: i,
     ...M
-  } = n, f = B(null);
-  return /* @__PURE__ */ p("div", { ref: f, children: [
-    /* @__PURE__ */ t(
-      l,
+  } = n, p = f(null);
+  return /* @__PURE__ */ B("div", { ref: p, children: [
+    /* @__PURE__ */ r(
+      m,
       {
         className: _([
           "MenuBar__MenuBarButton",
@@ -46,18 +41,26 @@ function N(n) {
           o
         ]),
         ...M,
-        onClick: r ? () => null : u,
-        onMouseOver: i,
-        children: /* @__PURE__ */ t("span", { className: "MenuBar__MenuBarButton-text", children: a })
+        onClick: t ? () => null : u,
+        onMouseOver: s,
+        children: /* @__PURE__ */ r("span", { className: "MenuBar__MenuBarButton-text", children: a })
       }
     ),
-    c && /* @__PURE__ */ t(
-      k,
+    /* @__PURE__ */ r(
+      v,
       {
-        width: s,
-        menuRef: this.menuRef,
-        onOutsideClick: m,
-        children: e
+        onClickOutside: i,
+        placement: "bottom-start",
+        content: /* @__PURE__ */ r(
+          k,
+          {
+            width: l,
+            menuRef: p,
+            onOutsideClick: i,
+            children: e
+          }
+        ),
+        isOpen: c
       }
     )
   ] });
@@ -66,41 +69,41 @@ function d(n) {
   const {
     entry: e,
     children: o,
-    openWidth: r,
+    openWidth: t,
     display: a,
     setOpenMenuBar: u,
-    openMenuBar: i,
+    openMenuBar: s,
     setOpenOnHover: c,
-    openOnHover: s,
-    disabled: m,
+    openOnHover: l,
+    disabled: i,
     className: M
   } = n;
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     N,
     {
-      openWidth: r,
+      openWidth: t,
       display: a,
-      disabled: m,
-      open: i === e,
+      disabled: i,
+      open: s === e,
       className: M,
       onClick: () => {
-        u(i === e ? null : e), c(!s);
+        u(s === e ? null : e), c(!l);
       },
       onOutsideClick: () => {
         u(null), c(!1);
       },
       onMouseOver: () => {
-        s && u(e);
+        l && u(e);
       },
       children: o
     }
   );
 }
-O.Dropdown = d;
-function g(n) {
-  const { value: e, displayText: o, onClick: r, checked: a } = n;
-  return /* @__PURE__ */ p(
-    l,
+C.Dropdown = d;
+function O(n) {
+  const { value: e, displayText: o, onClick: t, checked: a } = n;
+  return /* @__PURE__ */ B(
+    m,
     {
       className: _([
         "MenuBar__font",
@@ -108,39 +111,39 @@ function g(n) {
         "MenuBar__MenuItemToggle",
         "MenuBar__hover"
       ]),
-      onClick: () => r(e),
+      onClick: () => t(e),
       children: [
-        /* @__PURE__ */ t("div", { className: "MenuBar__MenuItemToggle__check", children: a && /* @__PURE__ */ t(v, { size: 1.3, name: "check" }) }),
+        /* @__PURE__ */ r("div", { className: "MenuBar__MenuItemToggle__check", children: /* @__PURE__ */ r(h, { size: 1.3, name: a ? "check" : "" }) }),
         o
       ]
     }
   );
 }
-d.MenuItemToggle = g;
-function C(n) {
-  const { value: e, displayText: o, onClick: r } = n;
-  return /* @__PURE__ */ t(
-    l,
+d.MenuItemToggle = O;
+function I(n) {
+  const { value: e, displayText: o, onClick: t } = n;
+  return /* @__PURE__ */ r(
+    m,
     {
       className: _([
         "MenuBar__font",
         "MenuBar__MenuItem",
         "MenuBar__hover"
       ]),
-      onClick: () => r == null ? void 0 : r(e),
+      onClick: () => t == null ? void 0 : t(e),
       children: o
     }
   );
 }
-d.MenuItem = C;
-function I() {
-  return /* @__PURE__ */ t("div", { className: "MenuBar__Separator" });
+d.MenuItem = I;
+function g() {
+  return /* @__PURE__ */ r("div", { className: "MenuBar__Separator" });
 }
-d.Separator = I;
-function O(n) {
+d.Separator = g;
+function C(n) {
   const { children: e } = n;
-  return /* @__PURE__ */ t(l, { className: "MenuBar", children: e });
+  return /* @__PURE__ */ r(m, { className: "MenuBar", children: e });
 }
 export {
-  O as MenuBar
+  C as MenuBar
 };

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.8.0",
+  "version": "1.8.2",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

package/styles/components/Input.scss

@@ -5,6 +5,8 @@ $text-color: base.$color-fg !default;
 $background-color: hsl(0, 0%, 3.9%) !default;
 $border-color: hsl(212.3, 100%, 76.7%) !default;
 $border-radius: base.$border-radius !default;
+$font-family: Verdana, sans-serif !default;
+$mono-font-family: "Consolas", monospace !default;
 
 .Input {
   position: relative;
@@ -46,7 +48,7 @@ $border-radius: base.$border-radius !default;
   height: base.em(17px);
   margin: 0;
   padding: 0 0.5em;
-  font-family: Verdana, sans-serif;
+  font-family: $font-family;
   background-color: transparent;
   color: $text-color;
   color: inherit;
@@ -59,5 +61,5 @@ $border-radius: base.$border-radius !default;
 }
 
 .Input--monospace .Input__input {
-  font-family: "Consolas", monospace;
+  font-family: $mono-font-family;
 }

package/styles/components/MenuBar.scss

@@ -50,7 +50,7 @@ $dropdown-z-index: 5;
   display: inline-block;
   vertical-align: middle;
   min-width: 3rem;
-  margin-left: 0.3rem;
+  padding-left: 0.3rem;
 }
 
 .MenuBar__over {