tgui-core 1.8.4 → 2.0.1

package/dist/components/ImageButton.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from '@popperjs/core';
+import { Placement } from '@floating-ui/react';
 import { ReactNode } from 'react';
 import { BooleanLike } from '../common/react';
 import { BoxProps } from './Box';
@@ -66,14 +66,13 @@ type Props = Partial<{
     title: string;
     /** A fancy, boxy tooltip, which appears when hovering over the button */
     tooltip: ReactNode;
-    /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */
+    /** Position of the tooltip. Does not guarantee the position is respected. */
     tooltipPosition: Placement;
 }> & BoxProps;
 /**
  * Stylized button, with the ability to easily and simply insert any picture into it.
  * - Without image, will be default question icon.
  * - If an image is specified but for some reason cannot be displayed, there will be a spinner fallback until it is loaded.
- * - Component has no **hover** effects, if `onClick` or `onRightClick` is not specified.
  */
 export declare function ImageButton(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ImageButton.js

@@ -1,161 +1,151 @@
-import { jsxs as I, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
-import { computeBoxProps as A } from "../common/ui.js";
-import { DmIcon as D } from "./DmIcon.js";
-import { Icon as E } from "./Icon.js";
+import { computeBoxProps as D } from "../common/ui.js";
+import { DmIcon as j } from "./DmIcon.js";
+import { Icon as A } from "./Icon.js";
 import { Image as y } from "./Image.js";
 import { Stack as N } from "./Stack.js";
 import { Tooltip as F } from "./Tooltip.js";
-function W(d) {
+function W(r) {
   const {
-    asset: m,
+    asset: l,
     assetSize: u = 32,
-    base64: a,
-    buttons: p,
-    buttonsAlt: g,
-    children: s,
+    base64: o,
+    buttons: _,
+    buttonsAlt: h,
+    children: n,
     className: k,
-    color: e,
-    disabled: i,
+    color: d,
+    disabled: a,
     dmFallback: v,
-    dmIcon: b,
-    dmIconState: x,
-    fluid: o,
-    imageSize: n = 64,
-    imageSrc: B,
-    onClick: r,
-    onRightClick: f,
-    selected: $,
-    title: C,
-    tooltip: _,
+    dmIcon: I,
+    dmIconState: f,
+    fluid: s,
+    imageSize: e = 64,
+    imageSrc: x,
+    onClick: m,
+    onRightClick: B,
+    selected: z,
+    title: b,
+    tooltip: $,
     tooltipPosition: S,
-    ...z
-  } = d;
-  let h = /* @__PURE__ */ I(
+    ...C
+  } = r;
+  let p = /* @__PURE__ */ g(
     "div",
     {
-      className: c([
-        "container",
-        o && (!!p || !!g) && "hasButtons",
-        !r && !f && "noAction",
-        $ && "ImageButton--selected",
-        i && "ImageButton--disabled",
-        e && typeof e == "string" ? `ImageButton--color__${e}` : "ImageButton--color__default"
-      ]),
-      tabIndex: i ? void 0 : 0,
-      onClick: (l) => {
-        !i && r && r(l);
+      className: "ImageButton__container",
+      tabIndex: a ? void 0 : 0,
+      onClick: (i) => {
+        !a && m && m(i);
       },
-      onKeyDown: (l) => {
-        l.key === "Enter" && !i && r && r(l);
+      onKeyDown: (i) => {
+        i.key === "Enter" && !a && m && m(i);
       },
-      onContextMenu: (l) => {
-        l.preventDefault(), !i && f && f(l);
+      onContextMenu: (i) => {
+        i.preventDefault(), !a && B && B(i);
       },
-      style: { width: o ? "auto" : `calc(${n}px + 0.5em + 2px)` },
+      style: { width: s ? "auto" : `calc(${e}px + 0.5em + 2px)` },
       children: [
-        /* @__PURE__ */ t("div", { className: "image", children: a || B ? /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: "ImageButton__image", children: o || x ? /* @__PURE__ */ t(
           y,
           {
-            src: a ? `data:image/png;base64,${a}` : B,
-            height: `${n}px`,
-            width: `${n}px`
+            src: o ? `data:image/png;base64,${o}` : x,
+            height: `${e}px`,
+            width: `${e}px`
           }
-        ) : b && x ? /* @__PURE__ */ t(
-          D,
+        ) : I && f ? /* @__PURE__ */ t(
+          j,
           {
-            icon: b,
-            icon_state: x,
-            fallback: v || /* @__PURE__ */ t(w, { icon: "spinner", spin: !0, size: n }),
-            height: `${n}px`,
-            width: `${n}px`
+            icon: I,
+            icon_state: f,
+            fallback: v || /* @__PURE__ */ t(w, { icon: "spinner", spin: !0, size: e }),
+            height: `${e}px`,
+            width: `${e}px`
           }
-        ) : m ? /* @__PURE__ */ t(
+        ) : l ? /* @__PURE__ */ t(
           y,
           {
-            className: c(m || []),
-            height: `${n}px`,
-            width: `${n}px`,
+            className: c(l || []),
+            height: `${e}px`,
+            width: `${e}px`,
             style: {
-              transform: `scale(${n / u})`,
+              transform: `scale(${e / u})`,
               transformOrigin: "top left"
             }
           }
-        ) : /* @__PURE__ */ t(w, { icon: "question", size: n }) }),
-        o ? /* @__PURE__ */ I("div", { className: "info", children: [
-          C && /* @__PURE__ */ t("span", { className: c(["title", s && "divider"]), children: C }),
-          s && /* @__PURE__ */ t("span", { className: "contentFluid", children: s })
-        ] }) : s && /* @__PURE__ */ t(
-          "span",
-          {
-            className: c([
-              "content",
-              $ && "ImageButton--contentSelected",
-              i && "ImageButton--contentDisabled",
-              e && typeof e == "string" ? `ImageButton--contentColor__${e}` : "ImageButton--contentColor__default"
-            ]),
-            children: s
-          }
-        )
+        ) : /* @__PURE__ */ t(w, { icon: "question", size: e }) }),
+        s ? /* @__PURE__ */ g("div", { className: "ImageButton__content", children: [
+          b && /* @__PURE__ */ t(
+            "span",
+            {
+              className: c([
+                "ImageButton__content--title",
+                !!n && "ImageButton__content--divider"
+              ]),
+              children: b
+            }
+          ),
+          n && /* @__PURE__ */ t("span", { className: "ImageButton__content--text", children: n })
+        ] }) : !!n && /* @__PURE__ */ t("span", { className: "ImageButton__content", children: n })
       ]
     }
   );
-  return _ && (h = /* @__PURE__ */ t(F, { content: _, position: S, children: h })), /* @__PURE__ */ I(
+  return $ && (p = /* @__PURE__ */ t(F, { content: $, position: S, children: p })), /* @__PURE__ */ g(
     "div",
     {
       className: c([
         "ImageButton",
-        o && "ImageButton--fluid",
+        s && "ImageButton--fluid",
+        z && "ImageButton--selected",
+        a && "ImageButton--disabled",
+        d && typeof d == "string" ? `ImageButton__color--${d}` : "ImageButton__color--default",
         k
       ]),
-      ...A(z),
+      ...D(C),
       children: [
-        h,
-        p && /* @__PURE__ */ t(
+        p,
+        _ && /* @__PURE__ */ t(
           "div",
           {
             className: c([
-              "buttonsContainer",
-              !s && "buttonsEmpty",
-              o && i && "ImageButton--disabled",
-              o && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : o && "ImageButton--buttonsContainerColor__default"
+              "ImageButton__buttons",
+              !n && "ImageButton__buttons--empty"
             ]),
             style: {
               width: "auto"
             },
-            children: p
+            children: _
           }
         ),
-        g && /* @__PURE__ */ t(
+        h && /* @__PURE__ */ t(
           "div",
           {
             className: c([
-              "buttonsContainer",
-              "buttonsAltContainer",
-              !s && "buttonsEmpty",
-              o && i && "ImageButton--disabled",
-              o && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : o && "ImageButton--buttonsContainerColor__default"
+              "ImageButton__buttons",
+              "ImageButton__buttons--alt",
+              !n && "ImageButton__buttons--empty"
             ]),
             style: {
-              width: `calc(${n}px + ${o ? 0 : 0.5}em)`,
-              maxWidth: o ? "auto" : `calc(${n}px +  0.5em)`
+              width: `calc(${e}px + ${s ? 0 : 0.5}em)`,
+              maxWidth: s ? "auto" : `calc(${e}px +  0.5em)`
             },
-            children: g
+            children: h
           }
         )
       ]
     }
   );
 }
-function w(d) {
-  const { icon: m, spin: u = !1, size: a = 64 } = d;
-  return /* @__PURE__ */ t(N, { height: `${a}px`, width: `${a}px`, children: /* @__PURE__ */ t(N.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
-    E,
+function w(r) {
+  const { icon: l, spin: u = !1, size: o = 64 } = r;
+  return /* @__PURE__ */ t(N, { height: `${o}px`, width: `${o}px`, children: /* @__PURE__ */ t(N.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
+    A,
     {
       spin: u,
-      name: m,
+      name: l,
       color: "gray",
-      style: { fontSize: `calc(${a}px * 0.75)` }
+      style: { fontSize: `calc(${o}px * 0.75)` }
     }
   ) }) });
 }

package/dist/components/InfinitePlane.d.ts

@@ -1,35 +1,38 @@
-import { Component, PropsWithChildren } from 'react';
+import { 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;
+type Props = {
+    /** The width of the image to display. */
     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;
-}
+} & Partial<{
+    /** The background image to display. */
+    backgroundImage: string;
+    /** The initial left position of the image. */
+    initialLeft: number;
+    /** The initial top position of the image. */
+    initialTop: number;
+    /** A callback function that is called when the background image is moved. */
+    onBackgroundMoved: (newX: number, newY: number) => void;
+    /** A callback function that is called when the zoom value changes. */
+    onZoomChange: (newZoomValue: number) => void;
+}> & BoxProps & PropsWithChildren;
+/**
+ * ## InfinitePlane
+ * Creates a scrolling infinite plane using a background image.
+ *
+ * @example
+ * ```tsx
+ * <InfinitePlane imageWidth={100} backgroundImage="https://example.com/image.png">
+ *   <Box position="absolute" top={0} left={0}>
+ *     Hello, world!
+ *   </Box>
+ *   <Box position="absolute" top={0} left={100}>
+ *     Hello, world!
+ *   </Box>
+ *   <Box position="absolute" top={0} left={200}>
+ *     Hello, world!
+ *   </Box>
+ * </InfinitePlane>
+ * ```
+ */
+export declare function InfinitePlane(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfinitePlane.js

@@ -1,143 +1,133 @@
-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
-    };
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { useState as i, useEffect as z } from "react";
+import { computeBoxProps as A } from "../common/ui.js";
+import { Button as O } from "./Button.js";
+import { ProgressBar as N } from "./ProgressBar.js";
+import { Stack as c } from "./Stack.js";
+const f = 0.5, p = 1.5, S = 0.1;
+function F(l) {
+  const {
+    backgroundImage: t,
+    children: r,
+    imageWidth: $,
+    initialLeft: h = 0,
+    initialTop: w = 0,
+    onBackgroundMoved: a,
+    onZoomChange: u,
+    ...M
+  } = l, [E, T] = i(0), [y, C] = i(0), [g, D] = i(0), [_, v] = i(!1), [x, P] = i(0), [n, V] = i(1);
+  function L(e) {
+    T(e.clientX - g), C(e.clientY - x), v(!0);
   }
-  componentDidMount() {
-    window.addEventListener("mouseup", this.onMouseUp), window.addEventListener("mousedown", this.doOffsetMouse), window.addEventListener("mousemove", this.doOffsetMouse), window.addEventListener("mouseup", this.doOffsetMouse);
+  function b(e) {
+    if (!_) return;
+    const m = e.clientX - E, s = e.clientY - y;
+    a == null || a(m + h, s + w), D(m), P(s);
   }
-  componentWillUnmount() {
-    window.removeEventListener("mouseup", this.onMouseUp), window.removeEventListener("mousedown", this.doOffsetMouse), window.removeEventListener("mousemove", this.doOffsetMouse), window.removeEventListener("mouseup", this.doOffsetMouse);
+  function k() {
+    v(!1);
   }
-  render() {
-    const {
-      children: o,
-      backgroundImage: e,
-      imageWidth: n,
-      initialLeft: t = 0,
-      initialTop: l = 0,
-      ...m
-    } = this.props, { left: d, top: L, zoom: u } = this.state, p = t + d, f = l + L;
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        ...D({
-          ...m,
-          style: {
-            ...m.style,
-            overflow: "hidden",
-            position: "relative"
+  function X(e) {
+    if (e === "increase" && n >= p || e === "decrease" && n <= f) return;
+    const s = Math.round((n + (e === "increase" ? S : -0.1)) * 10) / 10;
+    V(s), u == null || u(s);
+  }
+  z(() => (window.addEventListener("mouseup", k), () => {
+    window.removeEventListener("mouseup", k);
+  }), []);
+  const I = h + g, Z = w + x;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ...A({
+        ...M,
+        style: {
+          ...M.style,
+          height: "100%",
+          overflow: "hidden",
+          position: "relative",
+          width: "100%"
+        }
+      }),
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            onMouseDown: L,
+            onMouseMove: b,
+            style: {
+              backgroundImage: `url("${t}")`,
+              backgroundPosition: `${I}px ${Z}px`,
+              backgroundRepeat: "repeat",
+              backgroundSize: `${n * $}px`,
+              height: "100%",
+              inset: 0,
+              position: "absolute",
+              width: "100%"
+            }
           }
-        }),
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            onMouseDown: L,
+            onMouseMove: b,
+            style: {
+              height: "100%",
+              inset: 0,
+              pointerEvents: "none",
+              position: "absolute",
+              transform: `translate(${I}px, ${Z}px) scale(${n})`,
+              transformOrigin: "top left",
+              width: "100%"
+            },
+            children: r
+          }
+        ),
+        /* @__PURE__ */ o(Y, { zoom: n, onZoomClick: X })
+      ]
+    }
+  );
+}
+function Y(l) {
+  const { zoom: t, onZoomClick: r } = l;
+  return /* @__PURE__ */ o("div", { style: { position: "absolute", top: 5, left: 5, right: 5 }, children: /* @__PURE__ */ d(c, { children: [
+    /* @__PURE__ */ o(c.Item, { children: /* @__PURE__ */ o(
+      O,
+      {
+        icon: "minus",
+        disabled: t <= f,
+        onClick: () => r(
+          "decrease"
+          /* Decrease */
+        )
+      }
+    ) }),
+    /* @__PURE__ */ o(c.Item, { grow: !0, children: /* @__PURE__ */ d(
+      N,
+      {
+        minValue: f,
+        value: t,
+        maxValue: p,
         children: [
-          /* @__PURE__ */ r(
-            "div",
-            {
-              onMouseDown: this.handleMouseDown,
-              onMouseMove: this.handleMouseMove,
-              style: {
-                position: "fixed",
-                height: "100%",
-                width: "100%",
-                backgroundImage: `url("${e}")`,
-                backgroundPosition: `${p}px ${f}px`,
-                backgroundRepeat: "repeat",
-                backgroundSize: `${u * n}px`
-              }
-            }
-          ),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              onMouseDown: this.handleMouseDown,
-              onMouseMove: this.handleMouseMove,
-              style: {
-                position: "fixed",
-                transform: `translate(${p}px, ${f}px) scale(${u})`,
-                transformOrigin: "top left",
-                height: "100%",
-                width: "100%"
-              },
-              children: o
-            }
-          ),
-          /* @__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: M,
-                value: u,
-                maxValue: v,
-                children: [
-                  u,
-                  "x"
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ r(h.Item, { children: /* @__PURE__ */ r(w, { icon: "plus", onClick: this.handleZoomIncrease }) })
-          ] })
+          t,
+          "x"
         ]
       }
-    );
-  }
+    ) }),
+    /* @__PURE__ */ o(c.Item, { children: /* @__PURE__ */ o(
+      O,
+      {
+        icon: "plus",
+        disabled: t >= p,
+        onClick: () => r(
+          "increase"
+          /* Increase */
+        )
+      }
+    ) })
+  ] }) });
 }
 export {
-  b as InfinitePlane
+  F as InfinitePlane
 };

package/dist/components/Knob.d.ts

@@ -10,7 +10,10 @@ type Props = {
     bipolar: boolean;
     /** Color of the outer ring around the knob. */
     color: string | BooleanLike;
-    /** If set, this value will be used to set the fill percentage of the outer ring independently of the main value. */
+    /**
+     * If set, this value will be used to set the fill percentage of the outer
+     * ring independently of the main value.
+     */
     fillValue: number;
     /** Format value using this function before displaying it. */
     format: (value: number) => string;
@@ -20,18 +23,31 @@ type Props = {
     minValue: number;
     /** Adjust value by this amount when dragging the input. */
     onChange: (event: Event, value: number) => void;
-    /** An event, which fires about every 500ms when you drag the input up and down, on release and on manual editing. */
+    /**
+     * An event, which fires about every 500ms when you drag the input up and
+     * down, on release and on manual editing.
+     */
     onDrag: (event: Event, value: number) => void;
-    /** Applies a `color` to the outer ring around the knob based on whether the value lands in the range between `from` and `to`. */
+    /**
+     * Applies a `color` to the outer ring around the knob based on whether the
+     * value lands in the range between `from` and `to`.
+     */
     ranges: Record<string, [number, number]>;
-    /** Relative size of the knob. `1` is normal size, `2` is two times bigger. Fractional numbers are supported. */
+    /**
+     * Relative size of the knob. `1` is normal size, `2` is two times bigger.
+     * Fractional numbers are supported.
+     */
     size: number;
     /** Adjust value by this amount when dragging the input. */
     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: boolean;
+    /**
+     * 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. */