tgui-core 2.0.4 → 2.0.6

package/README.md

@@ -66,7 +66,7 @@ Contributions are welcome. Please open an issue or a pull request. I am availabl
 
 To automagically release a new version of the tgui-core package, simply create a [new release](https://github.com/tgstation/tgui-core/releases/new) with the tag set to the new version you want to publish. Set the tag to be the commit you want to base the version off of (likely the latest, being the default).
 
-The release workflow will take care of setting the `package.json` version, building, generating a release changelog, and publishing to npm.
+The release workflow will take care of setting the `package.json` version, building, and publishing to npm.
 
 ### Development
 

package/dist/components/Knob.d.ts

@@ -42,12 +42,6 @@ type Props = {
     step: number;
     /** Screen distance mouse needs to travel to adjust value by one `step`. */
     stepPixelSize: number;
-    /**
-     * A number in milliseconds, for which the input will hold off from updating
-     * while events propagate through the backend. Default is about 250ms,
-     * increase it if you still see flickering.
-     */
-    suppressFlicker: number;
     /** Whether to clamp the value to the range. */
     unclamped: boolean;
     /** Unit to display to the right of value. */

package/dist/components/Knob.js

@@ -1,79 +1,77 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { keyOfMatchingRange as S, scale as c } from "../common/math.js";
-import { classes as $ } from "../common/react.js";
-import { computeBoxProps as j, computeBoxClassName as E } from "../common/ui.js";
-import { DraggableControl as T } from "./DraggableControl.js";
-function G(m) {
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { keyOfMatchingRange as F, scale as c } from "../common/math.js";
+import { classes as S } from "../common/react.js";
+import { computeBoxProps as $, computeBoxClassName as j } from "../common/ui.js";
+import { DraggableControl as E } from "./DraggableControl.js";
+function A(m) {
   const {
     // Draggable props (passthrough)
     animated: d,
-    format: p,
+    format: g,
     maxValue: a,
-    minValue: l,
-    onChange: u,
-    onDrag: g,
+    minValue: o,
+    onChange: p,
+    onDrag: u,
     step: _,
     stepPixelSize: b,
-    suppressFlicker: f,
-    unclamped: h,
-    unit: x,
+    unclamped: f,
+    unit: h,
     value: r,
     // Own props
-    bipolar: s,
-    className: K,
-    color: v,
-    fillValue: n,
-    ranges: N = {},
-    size: y = 1,
-    style: V,
-    ...i
+    bipolar: n,
+    className: x,
+    color: K,
+    fillValue: i,
+    ranges: v = {},
+    size: N = 1,
+    style: y,
+    ...s
   } = m;
   return /* @__PURE__ */ e(
-    T,
+    E,
     {
       dragMatrix: [0, -1],
       animated: d,
-      format: p,
+      format: g,
       maxValue: a,
-      minValue: l,
-      onChange: u,
-      onDrag: g,
+      minValue: o,
+      onChange: p,
+      onDrag: u,
       step: _,
       stepPixelSize: b,
-      suppressFlicker: f,
-      unclamped: h,
-      unit: x,
+      unclamped: f,
+      unit: h,
       value: r,
-      children: (k) => {
+      children: (V) => {
         const {
           displayElement: D,
           displayValue: t,
           dragging: M,
-          handleDragStart: B,
-          inputElement: P
-        } = k, C = c(
-          n ?? t,
-          l,
+          handleDragStart: k,
+          inputElement: B
+        } = V, P = c(
+          i ?? t,
+          o,
           a
-        ), F = c(t, l, a), w = v || S(n ?? r, N) || "default", z = Math.min((F - 0.5) * 270, 225);
-        return /* @__PURE__ */ o(
+        ), C = c(t, o, a), w = K || F(i ?? r, v) || "default", z = Math.min((C - 0.5) * 270, 225);
+        return /* @__PURE__ */ l(
           "div",
           {
-            className: $([
+            className: S([
               "Knob",
               `Knob--color--${w}`,
-              s && "Knob--bipolar",
-              K,
-              E(i)
+              n && "Knob--bipolar",
+              x,
+              j(s)
             ]),
-            ...j({
+            ...$({
               style: {
-                fontSize: `${y}em`,
-                ...V
+                fontSize: `${N}em`,
+                ...y
               },
-              ...i
+              ...s
             }),
-            onMouseDown: B,
+            onMouseDown: k,
             children: [
               /* @__PURE__ */ e("div", { className: "Knob__circle", children: /* @__PURE__ */ e(
                 "div",
@@ -86,7 +84,7 @@ function G(m) {
                 }
               ) }),
               M && /* @__PURE__ */ e("div", { className: "Knob__popupValue", children: D }),
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ l(
                 "svg",
                 {
                   className: "Knob__ring Knob__ringTrackPivot",
@@ -97,7 +95,7 @@ function G(m) {
                   ]
                 }
               ),
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ l(
                 "svg",
                 {
                   className: "Knob__ring Knob__ringFillPivot",
@@ -110,7 +108,7 @@ function G(m) {
                         className: "Knob__ringFill",
                         style: {
                           strokeDashoffset: Math.max(
-                            ((s ? 2.75 : 2) - C * 1.5) * Math.PI * 50,
+                            ((n ? 2.75 : 2) - P * 1.5) * Math.PI * 50,
                             0
                           )
                         },
@@ -122,7 +120,7 @@ function G(m) {
                   ]
                 }
               ),
-              P
+              B
             ]
           }
         );
@@ -131,5 +129,5 @@ function G(m) {
   );
 }
 export {
-  G as Knob
+  A as Knob
 };

package/dist/components/ProgressBar.d.ts

@@ -40,6 +40,8 @@ type Props = {
      *
      */
     ranges: Record<string, [number, number]>;
+    /** Removes progress percentage text, makes no sense if children are present */
+    empty: boolean;
 }> & BoxProps & PropsWithChildren;
 /**
  * ## ProgressBar

package/dist/components/ProgressBar.js

@@ -1,9 +1,9 @@
-import { jsxs as B, jsx as i } from "react/jsx-runtime";
-import { CSS_COLORS as C } from "../common/constants.js";
-import { keyOfMatchingRange as P, toFixed as h, clamp01 as x, scale as _ } from "../common/math.js";
-import { classes as v } from "../common/react.js";
-import { computeBoxProps as y, computeBoxClassName as N } from "../common/ui.js";
-function j(n) {
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import { CSS_COLORS as P } from "../common/constants.js";
+import { keyOfMatchingRange as h, toFixed as x, clamp01 as _, scale as v } from "../common/math.js";
+import { classes as y } from "../common/react.js";
+import { computeBoxProps as N, computeBoxClassName as S } from "../common/ui.js";
+function k(n) {
   const {
     className: m,
     value: o,
@@ -11,12 +11,13 @@ function j(n) {
     maxValue: f = 1,
     color: u,
     ranges: p = {},
+    empty: g,
     children: r,
     ...l
-  } = n, a = _(o, d, f), g = r !== void 0, s = u || P(o, p) || "default", e = y(l), t = ["ProgressBar", m, N(l)], c = {
-    width: `${x(a) * 100}%`
+  } = n, t = v(o, d, f), B = r !== void 0, s = u || h(o, p) || "default", e = N(l), a = ["ProgressBar", m, S(l)], c = {
+    width: `${_(t) * 100}%`
   };
-  return C.includes(s) || s === "default" ? t.push(`ProgressBar--color--${s}`) : (e.style = { ...e.style, borderColor: s }, c.backgroundColor = s), /* @__PURE__ */ B("div", { className: v(t), ...e, children: [
+  return P.includes(s) || s === "default" ? a.push(`ProgressBar--color--${s}`) : (e.style = { ...e.style, borderColor: s }, c.backgroundColor = s), /* @__PURE__ */ C("div", { className: y(a), ...e, children: [
     /* @__PURE__ */ i(
       "div",
       {
@@ -24,9 +25,9 @@ function j(n) {
         style: c
       }
     ),
-    /* @__PURE__ */ i("div", { className: "ProgressBar__content", children: g ? r : `${h(a * 100)}%` })
+    /* @__PURE__ */ i("div", { className: "ProgressBar__content", children: B ? r : !g && `${x(t * 100)}%` })
   ] });
 }
 export {
-  j as ProgressBar
+  k as ProgressBar
 };

package/dist/components/Section.d.ts

@@ -1,4 +1,31 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } 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;
+    /** Ref to the section element. */
+    ref: RefObject<HTMLDivElement | 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.
@@ -26,46 +53,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;
-    /** 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;
-}> & Partial<{
-    as: string;
-    children: ReactNode;
-    className: string | import('../common/react').BooleanLike;
-    id: string;
-    style: import('react').CSSProperties;
-    tw: string;
-} & import('../common/ui').BooleanStyleMap & import('../common/ui').StringStyleMap & {
-    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>;
-    onMouseLeave: 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 function Section(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Section.js

@@ -1,66 +1,65 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { forwardRef as C, useRef as P, useEffect as g } from "react";
-import { addScrollableNode as j, removeScrollableNode as w } from "../common/events.js";
-import { canRender as s, classes as a } from "../common/react.js";
-import { computeBoxProps as z, computeBoxClassName as B } from "../common/ui.js";
-const q = C(
-  (d, m) => {
-    const {
-      buttons: o,
-      children: f,
-      className: S,
-      container_id: _ = "",
-      fill: u,
-      fitted: p,
-      flexGrow: N,
-      noTopPadding: h,
-      onScroll: b,
-      scrollable: n,
-      scrollableHorizontal: c,
-      stretchContents: x,
-      title: r,
-      ...l
-    } = d, v = P(null), e = m || v, T = s(r) || s(o);
-    return g(() => (e != null && e.current && (n || c) && j(e.current), () => {
-      e != null && e.current && w(e.current);
-    }), []), /* @__PURE__ */ i(
-      "div",
-      {
-        id: _,
-        className: a([
-          "Section",
-          u && "Section--fill",
-          p && "Section--fitted",
-          n && "Section--scrollable",
-          c && "Section--scrollableHorizontal",
-          N && "Section--flex",
-          S,
-          B(l)
-        ]),
-        ...z(l),
-        children: [
-          T && /* @__PURE__ */ i("div", { className: "Section__title", children: [
-            /* @__PURE__ */ t("span", { className: "Section__titleText", children: r }),
-            /* @__PURE__ */ t("div", { className: "Section__buttons", children: o })
-          ] }),
-          /* @__PURE__ */ t("div", { className: "Section__rest", children: /* @__PURE__ */ t(
-            "div",
-            {
-              className: a([
-                "Section__content",
-                x && "Section__content--stretchContents",
-                h && "Section__content--noTopPadding"
-              ]),
-              onScroll: b,
-              ref: e,
-              children: f
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useRef as T, useEffect as C } from "react";
+import { addScrollableNode as P, removeScrollableNode as g } from "../common/events.js";
+import { canRender as a, classes as d } from "../common/react.js";
+import { computeBoxProps as j, computeBoxClassName as z } from "../common/ui.js";
+function k(m) {
+  const {
+    buttons: c,
+    children: S,
+    className: f,
+    container_id: u = "",
+    fill: _,
+    fitted: p,
+    flexGrow: N,
+    noTopPadding: h,
+    onScroll: b,
+    ref: o,
+    scrollable: n,
+    scrollableHorizontal: i,
+    stretchContents: x,
+    title: l,
+    ...r
+  } = m, t = T((o == null ? void 0 : o.current) ?? null), v = a(l) || a(c);
+  return C(() => (t != null && t.current && (n || i) && P(t.current), () => {
+    t != null && t.current && g(t.current);
+  }), []), /* @__PURE__ */ s(
+    "div",
+    {
+      id: u,
+      className: d([
+        "Section",
+        _ && "Section--fill",
+        p && "Section--fitted",
+        n && "Section--scrollable",
+        i && "Section--scrollableHorizontal",
+        N && "Section--flex",
+        f,
+        z(r)
+      ]),
+      ...j(r),
+      children: [
+        v && /* @__PURE__ */ s("div", { className: "Section__title", children: [
+          /* @__PURE__ */ e("span", { className: "Section__titleText", children: l }),
+          /* @__PURE__ */ e("div", { className: "Section__buttons", children: c })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "Section__rest", children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: d([
+              "Section__content",
+              x && "Section__content--stretchContents",
+              h && "Section__content--noTopPadding"
+            ]),
+            onScroll: b,
+            ref: t,
+            children: S
+          }
+        ) })
+      ]
+    }
+  );
+}
 export {
-  q as Section
+  k as Section
 };

package/dist/components/Slider.d.ts

@@ -42,12 +42,6 @@ type Props = {
      * while dragging. Use higher for larger sliders. Default is 1.
      */
     stepPixelSize: number;
-    /**
-     * A number in milliseconds, for which the input will hold off from updating
-     * while events propagate through the backend. Default is about 250ms,
-     * increase it if you still see flickering.
-     */
-    suppressFlicker: number;
     /** Unit to display to the right of value. */
     unit: string;
 }> & BoxProps & PropsWithChildren;

package/dist/components/Slider.js

@@ -1,69 +1,67 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { keyOfMatchingRange as E, clamp01 as r, scale as u } from "../common/math.js";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { keyOfMatchingRange as F, clamp01 as s, scale as p } from "../common/math.js";
 import { classes as g } from "../common/react.js";
 import { computeBoxProps as O, computeBoxClassName as b } from "../common/ui.js";
-import { DraggableControl as z } from "./DraggableControl.js";
-function I(f) {
+import { DraggableControl as k } from "./DraggableControl.js";
+function H(f) {
   const {
     // Draggable props (passthrough)
     animated: _,
     format: h,
-    maxValue: a,
-    minValue: l,
+    maxValue: l,
+    minValue: r,
     onChange: v,
     onDrag: N,
     step: x,
     stepPixelSize: y,
-    suppressFlicker: B,
-    unit: P,
+    unit: B,
     value: i,
     // Own props
-    className: S,
-    fillValue: s,
-    color: V,
-    ranges: C = {},
+    className: P,
+    fillValue: a,
+    color: S,
+    ranges: V = {},
     children: o,
     ...t
-  } = f, D = o !== void 0;
+  } = f, C = o !== void 0;
   return /* @__PURE__ */ e(
-    z,
+    k,
     {
       dragMatrix: [1, 0],
       animated: _,
       format: h,
-      maxValue: a,
-      minValue: l,
+      maxValue: l,
+      minValue: r,
       onChange: v,
       onDrag: N,
       step: x,
       stepPixelSize: y,
-      suppressFlicker: B,
-      unit: P,
+      unit: B,
       value: i,
-      children: (w) => {
+      children: (D) => {
         const {
           displayElement: n,
           displayValue: c,
-          dragging: M,
-          handleDragStart: $,
-          inputElement: F
-        } = w, j = s != null, d = u(
-          s ?? c,
-          l,
-          a
-        ), m = u(c, l, a), k = V || E(s ?? i, C) || "default";
-        return /* @__PURE__ */ p(
+          dragging: w,
+          handleDragStart: M,
+          inputElement: $
+        } = D, j = a != null, d = p(
+          a ?? c,
+          r,
+          l
+        ), m = p(c, r, l), E = S || F(a ?? i, V) || "default";
+        return /* @__PURE__ */ u(
           "div",
           {
             className: g([
               "Slider",
               "ProgressBar",
-              `ProgressBar--color--${k}`,
-              S,
+              `ProgressBar--color--${E}`,
+              P,
               b(t)
             ]),
             ...O(t),
-            onMouseDown: $,
+            onMouseDown: M,
             children: [
               /* @__PURE__ */ e(
                 "div",
@@ -73,7 +71,7 @@ function I(f) {
                     j && "ProgressBar__fill--animated"
                   ]),
                   style: {
-                    width: `${r(d) * 100}%`,
+                    width: `${s(d) * 100}%`,
                     opacity: 0.4
                   }
                 }
@@ -83,26 +81,26 @@ function I(f) {
                 {
                   className: "ProgressBar__fill",
                   style: {
-                    width: `${r(Math.min(d, m)) * 100}%`
+                    width: `${s(Math.min(d, m)) * 100}%`
                   }
                 }
               ),
-              /* @__PURE__ */ p(
+              /* @__PURE__ */ u(
                 "div",
                 {
                   className: "Slider__cursorOffset",
                   style: {
-                    width: `${r(m) * 100}%`
+                    width: `${s(m) * 100}%`
                   },
                   children: [
                     /* @__PURE__ */ e("div", { className: "Slider__cursor" }),
                     /* @__PURE__ */ e("div", { className: "Slider__pointer" }),
-                    M && /* @__PURE__ */ e("div", { className: "Slider__popupValue", children: n })
+                    w && /* @__PURE__ */ e("div", { className: "Slider__popupValue", children: n })
                   ]
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "ProgressBar__content", children: D ? o : n }),
-              F
+              /* @__PURE__ */ e("div", { className: "ProgressBar__content", children: C ? o : n }),
+              $
             ]
           }
         );
@@ -111,5 +109,5 @@ function I(f) {
   );
 }
 export {
-  I as Slider
+  H as Slider
 };

package/dist/components/Stack.d.ts

@@ -67,7 +67,7 @@ export declare namespace Stack {
     var Divider: typeof StackDivider;
 }
 type StackItemProps = FlexItemProps & Partial<{
-    innerRef: RefObject<HTMLDivElement>;
+    innerRef: RefObject<HTMLDivElement | null>;
 }>;
 declare function StackItem(props: StackItemProps): import("react/jsx-runtime").JSX.Element;
 type StackDividerProps = FlexItemProps & Partial<{

package/dist/components/Stack.js

@@ -1,46 +1,47 @@
 import { jsx as i } from "react/jsx-runtime";
-import { classes as a } from "../common/react.js";
+import { useRef as S } from "react";
+import { classes as s } from "../common/react.js";
 import { computeBoxClassName as o } from "../common/ui.js";
 import { computeFlexProps as k, computeFlexClassName as v, computeFlexItemProps as m } from "./Flex.js";
-function n(r) {
-  const { className: c, vertical: e, fill: t, reverse: s, zebra: l, ...d } = r, f = e ? "column" : "row", S = s ? "-reverse" : "";
+function l(r) {
+  const { className: c, vertical: e, fill: t, reverse: a, zebra: n, ...d } = r, u = e ? "column" : "row", f = a ? "-reverse" : "";
   return /* @__PURE__ */ i(
     "div",
     {
-      className: a([
+      className: s([
         "Stack",
         t && "Stack--fill",
         e ? "Stack--vertical" : "Stack--horizontal",
-        l && "Stack--zebra",
-        s && `Stack--reverse${e ? "--vertical" : ""}`,
+        n && "Stack--zebra",
+        a && `Stack--reverse${e ? "--vertical" : ""}`,
         c,
         v(r)
       ]),
       ...k({
-        direction: `${f}${S}`,
+        direction: `${u}${f}`,
         ...d
       })
     }
   );
 }
-function u(r) {
-  const { className: c, innerRef: e, ...t } = r;
+function p(r) {
+  const { className: c, innerRef: e, ...t } = r, a = S((e == null ? void 0 : e.current) ?? null);
   return /* @__PURE__ */ i(
     "div",
     {
-      className: a(["Stack__item", c, o(t)]),
-      ref: e,
+      className: s(["Stack__item", c, o(t)]),
+      ref: a,
       ...m(t)
     }
   );
 }
-n.Item = u;
-function p(r) {
+l.Item = p;
+function x(r) {
   const { className: c, hidden: e, ...t } = r;
   return /* @__PURE__ */ i(
     "div",
     {
-      className: a([
+      className: s([
         "Stack__item",
         "Stack__divider",
         e && "Stack__divider--hidden",
@@ -51,7 +52,7 @@ function p(r) {
     }
   );
 }
-n.Divider = p;
+l.Divider = x;
 export {
-  n as Stack
+  l as Stack
 };

package/dist/components/TextArea.d.ts

@@ -1,11 +1,6 @@
-import { SyntheticEvent } from 'react';
-/**
- * ## Textarea
- *
- * An input for larger amounts of text. Use this when you want inputs larger
- * than one row.
- */
-export declare const TextArea: import('react').ForwardRefExoticComponent<Partial<{
+import { RefObject, SyntheticEvent } from 'react';
+import { BoxProps } from './Box';
+type Props = Partial<{
     /** Automatically focus the textarea on mount */
     autoFocus: boolean;
     /** Selects all text on mount */
@@ -30,6 +25,8 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     onInput: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
     /** Dummy text inside the textarea when it's empty */
     placeholder: string;
+    /** Ref to the textarea element. */
+    ref: RefObject<HTMLTextAreaElement | null>;
     /** Whether the textarea is scrollable when it has more content than height */
     scrollbar: boolean;
     /** Clears the textarea when the enter key is pressed */
@@ -38,23 +35,12 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     userMarkup: Record<string, string>;
     /** The value of the textarea */
     value: string;
-}> & Partial<{
-    as: string;
-    children: import('react').ReactNode;
-    className: string | import('../common/react').BooleanLike;
-    id: string;
-    style: import('react').CSSProperties;
-    tw: string;
-} & import('../common/ui').BooleanStyleMap & import('../common/ui').StringStyleMap & {
-    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>;
-    onMouseLeave: 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<HTMLTextAreaElement>>;
+}> & BoxProps;
+/**
+ * ## Textarea
+ *
+ * An input for larger amounts of text. Use this when you want inputs larger
+ * than one row.
+ */
+export declare function TextArea(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextArea.js

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

package/package.json

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

package/styles/components/ProgressBar.scss

@@ -11,6 +11,8 @@ $border-radius: 0 !default;
   display: inline-block;
   position: relative;
   width: 100%;
+  min-height: 1.667em;
+  align-content: center;
   padding: 0 var(--space-m);
   border-width: var(--border-thickness-tiny) !important;
   border-style: solid !important;

package/styles/components/TextArea.scss

@@ -73,3 +73,10 @@ $border-radius: 0 !default;
   overflow-x: scroll;
   white-space: nowrap;
 }
+
+.TextArea__value-container {
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+}