tgui-core 2.0.4 → 2.0.5

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "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;