tgui-core 1.7.4 → 1.7.5

package/dist/common/keys.d.ts

@@ -21,11 +21,14 @@
  *
  */
 export declare enum KEY {
+    A = "a",
     Alt = "Alt",
     Backspace = "Backspace",
     Control = "Control",
+    D = "d",
     Delete = "Delete",
     Down = "ArrowDown",
+    E = "e",
     End = "End",
     Enter = "Enter",
     Esc = "Esc",
@@ -33,13 +36,17 @@ export declare enum KEY {
     Home = "Home",
     Insert = "Insert",
     Left = "ArrowLeft",
+    N = "n",
     PageDown = "PageDown",
     PageUp = "PageUp",
     Right = "ArrowRight",
+    S = "s",
     Shift = "Shift",
     Space = " ",
     Tab = "Tab",
-    Up = "ArrowUp"
+    Up = "ArrowUp",
+    W = "w",
+    Z = "z"
 }
 /**
  * ### isEscape
@@ -53,3 +60,57 @@ export declare enum KEY {
  * @returns true if key is Escape or Esc, false otherwise
  */
 export declare function isEscape(key: string): boolean;
+/**
+ * ### isAlphabetic
+ *
+ * Checks if the user has hit any alphabetic key (a - z)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key is in the range of a-z
+ */
+export declare function isAlphabetic(key: string): boolean;
+/**
+ * ### isNumeric
+ *
+ * Checks if the user has hit any numeric key (0 - 9)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key is in the range of 0 - 9
+ */
+export declare function isNumeric(key: string): boolean;
+/**
+ * ### isCardinal
+ *
+ * Checks if the user has hit any cardinal key (n s w e)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any cardinal n s w e
+ */
+export declare function isCardinal(key: string): boolean;
+/**
+ * ### isArrow
+ *
+ * Checks if the user has hit any arrow key
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any arrow keys
+ */
+export declare function isArrow(key: string): boolean;
+/**
+ * ### isWasd
+ *
+ * Checks if the user has hit any w a s d key
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any w a s d
+ */
+export declare function isWasd(key: string): boolean;
+/**
+ * ### isMovement
+ *
+ * Checks if the user has hit any movement key (w a s d and arrow keys)
+ *
+ * @param key - the key to check, typically from event.key
+ * @returns true if key matches any movement key w a s d and arrow keys
+ */
+export declare function isMovement(key: string): boolean;

package/dist/common/keys.js

@@ -1,8 +1,32 @@
-var r = /* @__PURE__ */ ((e) => (e.Alt = "Alt", e.Backspace = "Backspace", e.Control = "Control", e.Delete = "Delete", e.Down = "ArrowDown", e.End = "End", e.Enter = "Enter", e.Esc = "Esc", e.Escape = "Escape", e.Home = "Home", e.Insert = "Insert", e.Left = "ArrowLeft", e.PageDown = "PageDown", e.PageUp = "PageUp", e.Right = "ArrowRight", e.Shift = "Shift", e.Space = " ", e.Tab = "Tab", e.Up = "ArrowUp", e))(r || {});
-function t(e) {
-  return e === "Esc" || e === "Escape";
+var n = /* @__PURE__ */ ((r) => (r.A = "a", r.Alt = "Alt", r.Backspace = "Backspace", r.Control = "Control", r.D = "d", r.Delete = "Delete", r.Down = "ArrowDown", r.E = "e", r.End = "End", r.Enter = "Enter", r.Esc = "Esc", r.Escape = "Escape", r.Home = "Home", r.Insert = "Insert", r.Left = "ArrowLeft", r.N = "n", r.PageDown = "PageDown", r.PageUp = "PageUp", r.Right = "ArrowRight", r.S = "s", r.Shift = "Shift", r.Space = " ", r.Tab = "Tab", r.Up = "ArrowUp", r.W = "w", r.Z = "z", r))(n || {});
+function e(r) {
+  return r === "Esc" || r === "Escape";
+}
+function a(r) {
+  return r >= "a" && r <= "z";
+}
+function i(r) {
+  return r >= "0" && r <= "9";
+}
+function s(r) {
+  return r === "n" || r === "s" || r === "w" || r === "e";
+}
+function t(r) {
+  return r === "ArrowUp" || r === "ArrowDown" || r === "ArrowLeft" || r === "ArrowRight";
+}
+function o(r) {
+  return r === "w" || r === "a" || r === "s" || r === "d";
+}
+function c(r) {
+  return o(r) || t(r);
 }
 export {
-  r as KEY,
-  t as isEscape
+  n as KEY,
+  a as isAlphabetic,
+  t as isArrow,
+  s as isCardinal,
+  e as isEscape,
+  c as isMovement,
+  i as isNumeric,
+  o as isWasd
 };

package/dist/common/string.js

@@ -1,4 +1,4 @@
-function p(e, t = (r) => JSON.stringify(r)) {
+function l(e, t = (r) => JSON.stringify(r)) {
   const r = e.toLowerCase().trim();
   return (n) => {
     if (!r)
@@ -8,16 +8,16 @@ function p(e, t = (r) => JSON.stringify(r)) {
   };
 }
 const a = ["a", "e", "i", "o", "u"];
-function l(e, t, r) {
+function f(e, t, r) {
   return t === 1 ? e : r ? e + r : e.endsWith("s") || e.endsWith("x") || e.endsWith("z") || e.endsWith("ch") || e.endsWith("sh") ? `${e}es` : e.endsWith("y") && !a.includes(e.charAt(e.length - 2)) ? `${e.slice(0, -1)}ies` : `${e}s`;
 }
 function c(e) {
   return e.charAt(0).toUpperCase() + e.slice(1).toLowerCase();
 }
-function f(e) {
+function h(e) {
   return e.replace(/(^\w{1})|(\s+\w{1})/g, (t) => t.toUpperCase());
 }
-function h(e) {
+function g(e) {
   return e.replace(/^\w/, (t) => t.toUpperCase());
 }
 const i = ["Id", "Tv"], u = [
@@ -43,7 +43,7 @@ const i = ["Id", "Tv"], u = [
   "To",
   "With"
 ];
-function g(e) {
+function d(e) {
   if (!e) return e;
   let t = e.replace(/([^\W_]+[^\s-]*) */g, (r) => c(r));
   for (const r of u) {
@@ -56,20 +56,19 @@ function g(e) {
   }
   return t;
 }
-const s = {
+const s = /&(nbsp|amp|quot|lt|gt|apos|trade|copy);/g, p = {
   amp: "&",
   apos: "'",
   gt: ">",
   lt: "<",
   nbsp: " ",
-  quot: '"'
+  quot: '"',
+  trade: "™",
+  cops: "©"
 };
-function d(e) {
+function m(e) {
   return e && e.replace(/<br>/gi, `
-`).replace(/<\/?[a-z0-9-_]+[^>]*>/gi, "").replace(
-    /&(nbsp|amp|quot|lt|gt|apos);/g,
-    (t, r) => s[r]
-  ).replace(/&#?([0-9]+);/gi, (t, r) => {
+`).replace(/<\/?[a-z0-9-_]+[^>]*>/gi, "").replace(s, (t, r) => p[r]).replace(/&#?([0-9]+);/gi, (t, r) => {
     const n = Number.parseInt(r, 10);
     return String.fromCharCode(n);
   }).replace(/&#x?([0-9a-f]+);/gi, (t, r) => {
@@ -80,10 +79,10 @@ function d(e) {
 export {
   a as VOWELS,
   c as capitalize,
-  f as capitalizeAll,
-  h as capitalizeFirst,
-  p as createSearch,
-  d as decodeHtmlEntities,
-  l as pluralize,
-  g as toTitleCase
+  h as capitalizeAll,
+  g as capitalizeFirst,
+  l as createSearch,
+  m as decodeHtmlEntities,
+  f as pluralize,
+  d as toTitleCase
 };

package/dist/components/Flex.d.ts

@@ -20,7 +20,7 @@ export type FlexProps = Partial<{
      */
     direction: string;
     /** Makes flexbox container inline, with similar behavior to an `inline` property on a `Box`. */
-    inline: boolean;
+    inlineFlex: boolean;
     /**
      * This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are
      * inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow

package/dist/components/Flex.js

@@ -4,7 +4,7 @@ import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "../co
 function p(e) {
   return r([
     "Flex",
-    e.inline && "Flex--inline",
+    e.inlineFlex && "Flex--inline",
     m(e)
   ]);
 }

package/dist/components/InfinitePlane.d.ts

@@ -0,0 +1,35 @@
+import { Component, PropsWithChildren } from 'react';
+import { BoxProps } from './Box';
+export type InfinitePlaneProps = PropsWithChildren<{
+    onZoomChange?: (newZoomValue: number) => void;
+    onBackgroundMoved?: (newX: number, newY: number) => void;
+    initialLeft?: number;
+    initialTop?: number;
+    backgroundImage?: string;
+    imageWidth: number;
+} & BoxProps>;
+type InfinitePlaneState = {
+    mouseDown: boolean;
+    left: number;
+    top: number;
+    lastLeft: number;
+    lastTop: number;
+    zoom: number;
+};
+export type MouseEventExtension = {
+    screenZoomX: number;
+    screenZoomY: number;
+};
+export declare class InfinitePlane extends Component<InfinitePlaneProps, InfinitePlaneState> {
+    constructor(props: InfinitePlaneProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    doOffsetMouse: (event: MouseEvent & MouseEventExtension) => void;
+    handleMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseUp: () => void;
+    handleZoomIncrease: (_event: any) => void;
+    handleZoomDecrease: (_event: any) => void;
+    handleMouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/InfinitePlane.js

@@ -1,20 +1,63 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { Component as v } from "react";
-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";
-const p = 0.5, f = 1.5, M = 0.1;
-class k extends v {
-  constructor(e) {
-    super(e), this.state = {
+var x = Object.defineProperty;
+var O = (a, s, o) => s in a ? x(a, s, { enumerable: !0, configurable: !0, writable: !0, value: o }) : a[s] = o;
+var i = (a, s, o) => O(a, typeof s != "symbol" ? s + "" : s, o);
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Component as Z } from "react";
+import { computeBoxProps as D } from "../common/ui.js";
+import { Button as w } from "./Button.js";
+import { ProgressBar as E } from "./ProgressBar.js";
+import { Stack as h } from "./Stack.js";
+const M = 0.5, v = 1.5, g = 0.1;
+class b extends Z {
+  constructor(o) {
+    super(o);
+    // This is really, REALLY cursed and basically overrides a built-in browser event via propagation rules
+    i(this, "doOffsetMouse", (o) => {
+      const { zoom: e } = this.state;
+      o.screenZoomX = o.screenX * e ** -1, o.screenZoomY = o.screenY * e ** -1;
+    });
+    i(this, "handleMouseDown", (o) => {
+      this.setState((e) => ({
+        mouseDown: !0,
+        lastLeft: o.clientX - e.left,
+        lastTop: o.clientY - e.top
+      }));
+    });
+    i(this, "onMouseUp", () => {
+      this.setState({
+        mouseDown: !1
+      });
+    });
+    i(this, "handleZoomIncrease", (o) => {
+      const { onZoomChange: e } = this.props, { zoom: n } = this.state, t = Math.min(n + g, v);
+      this.setState({
+        zoom: t
+      }), e && e(t);
+    });
+    i(this, "handleZoomDecrease", (o) => {
+      const { onZoomChange: e } = this.props, { zoom: n } = this.state, t = Math.max(n - g, M);
+      this.setState({
+        zoom: t
+      }), e && e(t);
+    });
+    i(this, "handleMouseMove", (o) => {
+      const { onBackgroundMoved: e, initialLeft: n = 0, initialTop: t = 0 } = this.props;
+      if (this.state.mouseDown) {
+        let l, m;
+        this.setState((d) => (l = o.clientX - d.lastLeft, m = o.clientY - d.lastTop, e && e(l + n, m + t), {
+          left: l,
+          top: m
+        }));
+      }
+    });
+    this.state = {
       mouseDown: !1,
       left: 0,
       top: 0,
       lastLeft: 0,
       lastTop: 0,
       zoom: 1
-    }, this.handleMouseDown = this.handleMouseDown.bind(this), this.handleMouseMove = this.handleMouseMove.bind(this), this.handleZoomIncrease = this.handleZoomIncrease.bind(this), this.handleZoomDecrease = this.handleZoomDecrease.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.doOffsetMouse = this.doOffsetMouse.bind(this);
+    };
   }
   componentDidMount() {
     window.addEventListener("mouseup", this.onMouseUp), window.addEventListener("mousedown", this.doOffsetMouse), window.addEventListener("mousemove", this.doOffsetMouse), window.addEventListener("mouseup", this.doOffsetMouse);
@@ -22,67 +65,28 @@ class k extends v {
   componentWillUnmount() {
     window.removeEventListener("mouseup", this.onMouseUp), window.removeEventListener("mousedown", this.doOffsetMouse), window.removeEventListener("mousemove", this.doOffsetMouse), window.removeEventListener("mouseup", this.doOffsetMouse);
   }
-  doOffsetMouse(e) {
-    const { zoom: o } = this.state;
-    e.screenZoomX = e.screenX * o ** -1, e.screenZoomY = e.screenY * o ** -1;
-  }
-  handleMouseDown(e) {
-    this.setState((o) => ({
-      mouseDown: !0,
-      lastLeft: e.clientX - o.left,
-      lastTop: e.clientY - o.top
-    }));
-  }
-  onMouseUp() {
-    this.setState({
-      mouseDown: !1
-    });
-  }
-  handleZoomIncrease(e) {
-    const { onZoomChange: o } = this.props, { zoom: s } = this.state, t = Math.min(s + M, f);
-    this.setState({
-      zoom: t
-    }), o && o(t);
-  }
-  handleZoomDecrease(e) {
-    const { onZoomChange: o } = this.props, { zoom: s } = this.state, t = Math.max(s - M, p);
-    this.setState({
-      zoom: t
-    }), o && o(t);
-  }
-  handleMouseMove(e) {
-    const { onBackgroundMoved: o, initialLeft: s = 0, initialTop: t = 0 } = this.props;
-    if (this.state.mouseDown) {
-      let a, i;
-      this.setState((h) => (a = e.clientX - h.lastLeft, i = e.clientY - h.lastTop, {
-        left: a,
-        top: i
-      })), o && o(a + s, i + t);
-    }
-  }
   render() {
     const {
-      children: e,
-      backgroundImage: o,
-      imageWidth: s,
+      children: o,
+      backgroundImage: e,
+      imageWidth: n,
       initialLeft: t = 0,
-      initialTop: a = 0,
-      ...i
-    } = this.props, { left: h, top: w, zoom: r } = this.state, m = t + h, u = a + w;
-    return /* @__PURE__ */ l(
+      initialTop: l = 0,
+      ...m
+    } = this.props, { left: d, top: L, zoom: u } = this.state, p = t + d, f = l + L;
+    return /* @__PURE__ */ c(
       "div",
       {
-        ref: this.ref,
-        ...Z({
-          ...i,
+        ...D({
+          ...m,
           style: {
-            ...i.style,
+            ...m.style,
             overflow: "hidden",
             position: "relative"
           }
         }),
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ r(
             "div",
             {
               onMouseDown: this.handleMouseDown,
@@ -91,43 +95,43 @@ class k extends v {
                 position: "fixed",
                 height: "100%",
                 width: "100%",
-                backgroundImage: `url("${o}")`,
-                backgroundPosition: `${m}px ${u}px`,
+                backgroundImage: `url("${e}")`,
+                backgroundPosition: `${p}px ${f}px`,
                 backgroundRepeat: "repeat",
-                backgroundSize: `${r * s}px`
+                backgroundSize: `${u * n}px`
               }
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ r(
             "div",
             {
               onMouseDown: this.handleMouseDown,
               onMouseMove: this.handleMouseMove,
               style: {
                 position: "fixed",
-                transform: `translate(${m}px, ${u}px) scale(${r})`,
+                transform: `translate(${p}px, ${f}px) scale(${u})`,
                 transformOrigin: "top left",
                 height: "100%",
                 width: "100%"
               },
-              children: e
+              children: o
             }
           ),
-          /* @__PURE__ */ l(d, { position: "absolute", width: "100%", children: [
-            /* @__PURE__ */ n(d.Item, { children: /* @__PURE__ */ n(c, { icon: "minus", onClick: this.handleZoomDecrease }) }),
-            /* @__PURE__ */ n(d.Item, { grow: 1, children: /* @__PURE__ */ l(
-              g,
+          /* @__PURE__ */ c(h, { position: "absolute", width: "100%", children: [
+            /* @__PURE__ */ r(h.Item, { children: /* @__PURE__ */ r(w, { icon: "minus", onClick: this.handleZoomDecrease }) }),
+            /* @__PURE__ */ r(h.Item, { grow: 1, children: /* @__PURE__ */ c(
+              E,
               {
-                minValue: p,
-                value: r,
-                maxValue: f,
+                minValue: M,
+                value: u,
+                maxValue: v,
                 children: [
-                  r,
+                  u,
                   "x"
                 ]
               }
             ) }),
-            /* @__PURE__ */ n(d.Item, { children: /* @__PURE__ */ n(c, { icon: "plus", onClick: this.handleZoomIncrease }) })
+            /* @__PURE__ */ r(h.Item, { children: /* @__PURE__ */ r(w, { icon: "plus", onClick: this.handleZoomIncrease }) })
           ] })
         ]
       }
@@ -135,5 +139,5 @@ class k extends v {
   }
 }
 export {
-  k as InfinitePlane
+  b as InfinitePlane
 };

package/dist/components/Modal.d.ts

@@ -1,4 +1,11 @@
+import { KeyboardEvent } from 'react';
 import { BoxProps } from './Box';
+export type ModalProps = BoxProps & Partial<{
+    /** Fires once the enter key is pressed */
+    onEnter: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /** Fires once the escape key is pressed */
+    onEscape: (e: KeyboardEvent<HTMLInputElement>) => void;
+}>;
 /**
  * ## Modal
  * A modal window. Uses a [Dimmer](https://github.com/tgstation/tgui-core/tree/main/lib/components/Dimmer.tsx)
@@ -6,4 +13,4 @@ import { BoxProps } from './Box';
  *
  * Must be a direct child of a layout component (e.g. `Window`).
  */
-export declare function Modal(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal(props: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal.js

@@ -1,18 +1,22 @@
-import { jsx as r } from "react/jsx-runtime";
-import { classes as t } from "../common/react.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;
-  return /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
+import { jsx as i } from "react/jsx-runtime";
+import { KEY as n, isEscape as f } from "../common/keys.js";
+import { classes as l } from "../common/react.js";
+import { computeBoxClassName as p, computeBoxProps as d } from "../common/ui.js";
+import { Dimmer as u } from "./Dimmer.js";
+function N(s) {
+  const { className: t, children: a, onEnter: r, onEscape: m, ...e } = s;
+  function c(o) {
+    o.key === n.Enter && (r == null || r(o)), f(o.key) && (m == null || m(o));
+  }
+  return /* @__PURE__ */ i(u, { onKeyDown: c, children: /* @__PURE__ */ i(
     "div",
     {
-      className: t(["Modal", s, a(o)]),
-      ...c(o),
-      children: e
+      className: l(["Modal", t, p(e)]),
+      ...d(e),
+      children: a
     }
   ) });
 }
 export {
-  f as Modal
+  N as Modal
 };

package/package.json

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

package/styles/components/Dimmer.scss

@@ -14,5 +14,6 @@ $background-dimness: 0.75 !default;
   right: 0;
   // Dim everything around it
   background-color: rgba(0, 0, 0, $background-dimness);
-  z-index: 1;
+  // Should be enough to cover everything except tooltips
+  z-index: 100;
 }

package/styles/components/Tooltip.scss

@@ -6,7 +6,6 @@ $background-color: hsl(0, 0%, 0%) !default;
 $border-radius: base.$border-radius !default;
 
 .Tooltip {
-  z-index: 2;
   padding: 0.5em 0.75em;
   pointer-events: none;
   text-align: left;
@@ -16,4 +15,6 @@ $border-radius: base.$border-radius !default;
   box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
   border-radius: $border-radius;
   max-width: base.em(250px);
+  // Must be over everything
+  z-index: 999;
 }