tgui-core 1.8.4 → 2.0.1

package/dist/components/Knob.js

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

package/dist/components/MenuBar.js

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

package/dist/components/Modal.js

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

package/dist/components/NumberInput.d.ts

@@ -51,7 +51,7 @@ type State = {
  * to fine tune the value, or single click it to manually type a number.
  */
 export declare class NumberInput extends Component<Props, State> {
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
     dragTimeout: NodeJS.Timeout;
     dragInterval: NodeJS.Timeout;
     state: State;

package/dist/components/Popper.d.ts

@@ -19,8 +19,12 @@ type OptionalProps = Partial<{
 type Props = RequiredProps & OptionalProps;
 /**
  * ## Popper
- *  Popper lets you position elements so that they don't go out of the bounds of the window.
+ * Popper lets you position elements so that they don't go out of the bounds of the window.
  * @url https://popper.js.org/react-popper/ for more information.
+ *
+ * @deprecated - Use
+ * [Floating](https://github.com/tgstation/tgui-core/tree/main/lib/components/Floating.tsx)
+ * instead.
  */
 export declare function Popper(props: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
 export {};