tgui-core 1.8.4 → 2.0.1

package/dist/components/TextArea.js

@@ -1,33 +1,33 @@
-import { jsxs as I, jsx as x } from "react/jsx-runtime";
-import { forwardRef as M, useRef as Y, useState as C, useImperativeHandle as H, useEffect as y } from "react";
+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 p } from "../common/react.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, s, l, t) {
-  return `${u.substring(0, l)}${s}${u.substring(l, t)}${s}${u.substring(t)}`;
+function q(u, o, l, t) {
+  return `${u.substring(0, l)}${o}${u.substring(l, t)}${o}${u.substring(t)}`;
 }
-const X = M(
-  (u, s) => {
+const X = I(
+  (u, o) => {
     const {
       autoFocus: l,
       autoSelect: t,
-      displayedValue: o,
-      dontUseTabForIndent: w,
-      maxLength: S,
-      noborder: $,
+      displayedValue: s,
+      dontUseTabForIndent: k,
+      maxLength: w,
+      noborder: S,
       onChange: i,
       onEnter: f,
       onEscape: g,
       onInput: d,
-      placeholder: k,
+      placeholder: $,
       scrollbar: E,
       selfClear: b,
       userMarkup: m,
       value: T,
       ...K
-    } = u, { className: D, fluid: N, nowrap: R, ...V } = K, a = Y(null), [j, B] = C(0);
-    function F(r) {
+    } = 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();
@@ -40,7 +40,7 @@ const X = M(
         g == null || g(r), b ? r.currentTarget.value = "" : (r.currentTarget.value = _(T), r.currentTarget.blur());
         return;
       }
-      if (!w && r.key === A.Tab) {
+      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;
@@ -57,7 +57,7 @@ const X = M(
       }
     }
     return H(
-      s,
+      o,
       () => a.current
     ), y(() => {
       if (!l && !t) return;
@@ -70,18 +70,18 @@ const X = M(
       if (!r) return;
       const e = _(T);
       r.value !== e && (r.value = e);
-    }, [T]), /* @__PURE__ */ I(
+    }, [T]), /* @__PURE__ */ F(
       U,
       {
-        className: p([
+        className: x([
           "TextArea",
           N && "TextArea--fluid",
-          $ && "TextArea--noborder",
+          S && "TextArea--noborder",
           D
         ]),
-        ...V,
+        ...R,
         children: [
-          !!o && /* @__PURE__ */ x(
+          !!s && /* @__PURE__ */ p(
             "div",
             {
               style: {
@@ -90,40 +90,42 @@ const X = M(
                 position: "absolute",
                 width: "100%"
               },
-              children: /* @__PURE__ */ x(
+              children: /* @__PURE__ */ p(
                 "div",
                 {
-                  className: p([
+                  className: x([
                     "TextArea__textarea",
                     "TextArea__textarea_custom"
                   ]),
                   style: {
-                    transform: `translateY(-${j}px)`
+                    transform: `translateY(-${V}px)`
                   },
-                  children: o
+                  children: s
                 }
               )
             }
           ),
-          /* @__PURE__ */ x(
+          /* @__PURE__ */ p(
             "textarea",
             {
-              className: p([
+              autoComplete: "off",
+              className: x([
                 "TextArea__textarea",
                 E && "TextArea__textarea--scrollable",
-                R && "TextArea__nowrap"
+                C && "TextArea__nowrap"
               ]),
-              maxLength: S,
+              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: F,
+              onKeyDown: B,
               onScroll: () => {
-                o && a.current && B(a.current.scrollTop);
+                s && a.current && j(a.current.scrollTop);
               },
-              placeholder: k,
+              placeholder: $,
               ref: a,
+              spellCheck: !1,
               style: {
-                color: o ? "rgba(0, 0, 0, 0)" : "inherit"
+                color: s ? "rgba(0, 0, 0, 0)" : "inherit"
               }
             }
           )

package/dist/components/Tooltip.d.ts

@@ -1,5 +1,5 @@
-import { Placement, VirtualElement, createPopper } from '@popperjs/core';
-import { Component, ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+import { ReactNode } from 'react';
 type Props = {
     /** The content to display in the tooltip */
     content: ReactNode;
@@ -9,36 +9,5 @@ type Props = {
     /** Where to place the tooltip relative to the reference element */
     position: Placement;
 }>;
-type State = {
-    hovered: boolean;
-};
-/**
- * ## Tooltip
- * A boxy tooltip from tgui 1. It is very hacky in its current state, and
- * requires setting `position: relative` on the container.
- *
- * Please note that
- * [Button](https://github.com/tgstation/tgui-core/tree/main/lib/components/Button.tsx)
- * component has a `tooltip` prop and it is recommended to use that prop instead.
- *
- * Usage:
- * ```tsx
- * <Tooltip position="bottom" content="Box tooltip">
- *   <Box position="relative">Sample text.</Box>
- * </Tooltip>
- * ```
- */
-export declare class Tooltip extends Component<Props, State> {
-    static renderedTooltip: HTMLDivElement | undefined;
-    static singletonPopper: ReturnType<typeof createPopper> | undefined;
-    static currentHoveredElement: Element | undefined;
-    static virtualElement: VirtualElement;
-    getDOMNode(): Element;
-    componentDidMount(): void;
-    fadeOut(): void;
-    renderPopperContent(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): ReactNode;
-}
+export declare function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tooltip.js

@@ -1,81 +1,18 @@
-var s = Object.defineProperty;
-var p = (r, e, n) => e in r ? s(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
-var o = (r, e, n) => p(r, typeof e != "symbol" ? e + "" : e, n);
-import { jsx as l } from "react/jsx-runtime";
-import { Component as c } from "react";
-import { findDOMNode as m, render as a } from "react-dom";
-import { c as u } from "../popper-CiqSDJTE.js";
-const i = {
-  modifiers: [
+import { jsx as r } from "react/jsx-runtime";
+import { Floating as i } from "./Floating.js";
+function l(o) {
+  const { content: t, children: n, position: e } = o;
+  return /* @__PURE__ */ r(
+    i,
     {
-      name: "eventListeners",
-      enabled: !1
+      hoverOpen: !0,
+      content: t,
+      contentClasses: "Tooltip",
+      placement: e,
+      children: n
     }
-  ]
-}, h = {
-  width: 0,
-  height: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  x: 0,
-  y: 0,
-  toJSON: () => null
-}, t = class t extends c {
-  getDOMNode() {
-    return m(this);
-  }
-  componentDidMount() {
-    const e = this.getDOMNode();
-    e && (e.addEventListener("mouseenter", () => {
-      let n = t.renderedTooltip;
-      n === void 0 && (n = document.createElement("div"), n.className = "Tooltip", document.body.appendChild(n), t.renderedTooltip = n), t.currentHoveredElement = e, n.style.opacity = "1", this.renderPopperContent();
-    }), e.addEventListener("mouseleave", () => {
-      this.fadeOut();
-    }));
-  }
-  fadeOut() {
-    t.currentHoveredElement === this.getDOMNode() && (t.currentHoveredElement = void 0, t.renderedTooltip.style.opacity = "0");
-  }
-  renderPopperContent() {
-    const e = t.renderedTooltip;
-    e && a(/* @__PURE__ */ l("span", { children: this.props.content }), e, () => {
-      let n = t.singletonPopper;
-      n === void 0 ? (n = u(
-        t.virtualElement,
-        e,
-        {
-          ...i,
-          placement: this.props.position || "auto"
-        }
-      ), t.singletonPopper = n) : (n.setOptions({
-        ...i,
-        placement: this.props.position || "auto"
-      }), n.update());
-    });
-  }
-  componentDidUpdate() {
-    t.currentHoveredElement === this.getDOMNode() && this.renderPopperContent();
-  }
-  componentWillUnmount() {
-    this.fadeOut();
-  }
-  render() {
-    return this.props.children;
-  }
-};
-// Mounting poppers is really laggy because popper.js is very slow.
-// Thus, instead of using the Popper component, Tooltip creates ONE popper
-// and stores every tooltip inside that.
-// This means you can never have two tooltips at once, for instance.
-o(t, "renderedTooltip"), o(t, "singletonPopper"), o(t, "currentHoveredElement"), o(t, "virtualElement", {
-  getBoundingClientRect: () => {
-    var e;
-    return ((e = t.currentHoveredElement) == null ? void 0 : e.getBoundingClientRect()) ?? h;
-  }
-});
-let d = t;
+  );
+}
 export {
-  d as Tooltip
+  l as Tooltip
 };

package/dist/components/TrackOutsideClicks.d.ts

@@ -3,7 +3,7 @@ type Props = {
     onOutsideClick: () => void;
 } & PropsWithChildren;
 export declare class TrackOutsideClicks extends Component<Props> {
-    ref: import('react').RefObject<HTMLDivElement>;
+    ref: import('react').RefObject<HTMLDivElement | null>;
     constructor(props: any);
     componentWillUnmount(): void;
     handleOutsideClick(event: MouseEvent): void;

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ export { DraggableControl } from './DraggableControl';
 export { Dropdown } from './Dropdown';
 export { FitText } from './FitText';
 export { Flex } from './Flex';
+export { Floating } from './Floating';
 export { Icon } from './Icon';
 export { Image } from './Image';
 export { ImageButton } from './ImageButton';

package/dist/components/index.js

@@ -6,44 +6,45 @@ import { Box as l } from "./Box.js";
 import { Button as u } from "./Button.js";
 import { ByondUi as c } from "./ByondUi.js";
 import { Chart as b } from "./Chart.js";
-import { Collapsible as I } from "./Collapsible.js";
+import { Collapsible as g } from "./Collapsible.js";
 import { ColorBox as D } from "./ColorBox.js";
 import { Dialog as C } from "./Dialog.js";
 import { Dimmer as L } from "./Dimmer.js";
 import { Divider as y } from "./Divider.js";
-import { DmIcon as N } from "./DmIcon.js";
-import { DraggableControl as F } from "./DraggableControl.js";
+import { DmIcon as F } from "./DmIcon.js";
+import { DraggableControl as P } from "./DraggableControl.js";
 import { Dropdown as M } from "./Dropdown.js";
 import { FitText as h } from "./FitText.js";
 import { Flex as w } from "./Flex.js";
-import { Icon as O } from "./Icon.js";
-import { Image as U } from "./Image.js";
-import { ImageButton as j } from "./ImageButton.js";
-import { InfinitePlane as z } from "./InfinitePlane.js";
-import { Input as H } from "./Input.js";
-import { KeyListener as W } from "./KeyListener.js";
-import { Knob as Y } from "./Knob.js";
-import { LabeledControls as _ } from "./LabeledControls.js";
-import { LabeledList as oo } from "./LabeledList.js";
-import { MenuBar as eo } from "./MenuBar.js";
-import { Modal as mo } from "./Modal.js";
-import { NoticeBox as xo } from "./NoticeBox.js";
-import { NumberInput as io } from "./NumberInput.js";
-import { Popper as lo } from "./Popper.js";
-import { ProgressBar as uo } from "./ProgressBar.js";
-import { RestrictedInput as co } from "./RestrictedInput.js";
-import { RoundGauge as Bo } from "./RoundGauge.js";
-import { Section as go } from "./Section.js";
-import { Slider as To } from "./Slider.js";
-import { Stack as ko } from "./Stack.js";
-import { StyleableSection as So } from "./StyleableSection.js";
-import { Table as Ao } from "./Table.js";
-import { Tabs as Po } from "./Tabs.js";
-import { TextArea as Ko } from "./TextArea.js";
-import { TimeDisplay as Ro } from "./TimeDisplay.js";
-import { Tooltip as vo } from "./Tooltip.js";
-import { TrackOutsideClicks as Go } from "./TrackOutsideClicks.js";
-import { VirtualList as Qo } from "./VirtualList.js";
+import { Floating as O } from "./Floating.js";
+import { Icon as U } from "./Icon.js";
+import { Image as j } from "./Image.js";
+import { ImageButton as z } from "./ImageButton.js";
+import { InfinitePlane as H } from "./InfinitePlane.js";
+import { Input as W } from "./Input.js";
+import { KeyListener as Y } from "./KeyListener.js";
+import { Knob as _ } from "./Knob.js";
+import { LabeledControls as oo } from "./LabeledControls.js";
+import { LabeledList as eo } from "./LabeledList.js";
+import { MenuBar as mo } from "./MenuBar.js";
+import { Modal as xo } from "./Modal.js";
+import { NoticeBox as io } from "./NoticeBox.js";
+import { NumberInput as lo } from "./NumberInput.js";
+import { Popper as uo } from "./Popper.js";
+import { ProgressBar as co } from "./ProgressBar.js";
+import { RestrictedInput as Bo } from "./RestrictedInput.js";
+import { RoundGauge as Io } from "./RoundGauge.js";
+import { Section as To } from "./Section.js";
+import { Slider as ko } from "./Slider.js";
+import { Stack as So } from "./Stack.js";
+import { StyleableSection as Ao } from "./StyleableSection.js";
+import { Table as No } from "./Table.js";
+import { Tabs as Ko } from "./Tabs.js";
+import { TextArea as Ro } from "./TextArea.js";
+import { TimeDisplay as vo } from "./TimeDisplay.js";
+import { Tooltip as Go } from "./Tooltip.js";
+import { TrackOutsideClicks as Qo } from "./TrackOutsideClicks.js";
+import { VirtualList as Vo } from "./VirtualList.js";
 export {
   e as AnimatedNumber,
   m as Autofocus,
@@ -53,42 +54,43 @@ export {
   u as Button,
   c as ByondUi,
   b as Chart,
-  I as Collapsible,
+  g as Collapsible,
   D as ColorBox,
   C as Dialog,
   L as Dimmer,
   y as Divider,
-  N as DmIcon,
-  F as DraggableControl,
+  F as DmIcon,
+  P as DraggableControl,
   M as Dropdown,
   h as FitText,
   w as Flex,
-  O as Icon,
-  U as Image,
-  j as ImageButton,
-  z as InfinitePlane,
-  H as Input,
-  W as KeyListener,
-  Y as Knob,
-  _ as LabeledControls,
-  oo as LabeledList,
-  eo as MenuBar,
-  mo as Modal,
-  xo as NoticeBox,
-  io as NumberInput,
-  lo as Popper,
-  uo as ProgressBar,
-  co as RestrictedInput,
-  Bo as RoundGauge,
-  go as Section,
-  To as Slider,
-  ko as Stack,
-  So as StyleableSection,
-  Ao as Table,
-  Po as Tabs,
-  Ko as TextArea,
-  Ro as TimeDisplay,
-  vo as Tooltip,
-  Go as TrackOutsideClicks,
-  Qo as VirtualList
+  O as Floating,
+  U as Icon,
+  j as Image,
+  z as ImageButton,
+  H as InfinitePlane,
+  W as Input,
+  Y as KeyListener,
+  _ as Knob,
+  oo as LabeledControls,
+  eo as LabeledList,
+  mo as MenuBar,
+  xo as Modal,
+  io as NoticeBox,
+  lo as NumberInput,
+  uo as Popper,
+  co as ProgressBar,
+  Bo as RestrictedInput,
+  Io as RoundGauge,
+  To as Section,
+  ko as Slider,
+  So as Stack,
+  Ao as StyleableSection,
+  No as Table,
+  Ko as Tabs,
+  Ro as TextArea,
+  vo as TimeDisplay,
+  Go as Tooltip,
+  Qo as TrackOutsideClicks,
+  Vo as VirtualList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.8.4",
+  "version": "2.0.1",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],
@@ -10,8 +10,8 @@
       "require": "./dist/components/index.cjs"
     },
     "./styles": {
-      "default": "./styles/main.scss",
-      "sass": "./styles/main.scss"
+      "sass": "./styles/main.scss",
+      "default": "./styles/main.scss"
     },
     "./styles/components/*": {
       "sass": "./styles/components/*"
@@ -39,36 +39,35 @@
   "type": "module",
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@chromatic-com/storybook": "^3.2.3",
+    "@floating-ui/react": "^0.27.6",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-console": "^3.0.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
-    "@types/node": "^22.9.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/webpack-env": "^1.18.5",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "chromatic": "^11.18.1",
-    "glob": "^11.0.0",
-    "prettier": "^3.3.3",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@types/webpack-env": "^1.18.8",
+    "@vitejs/plugin-react-swc": "^3.8.1",
+    "glob": "^11.0.1",
+    "prettier": "^3.5.3",
     "react-popper": "^2.3.0",
     "sass": "^1.81.0",
-    "storybook": "^8.4.7",
+    "storybook": "^8.6.12",
     "storybook-addon-sass-postcss": "^0.3.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0"
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
-  "packageManager": "pnpm@9.15.1+sha512.1acb565e6193efbebda772702950469150cf12bcc764262e7587e71d19dc98a423dff9536e57ea44c49bdf790ff694e83c27be5faa23d67e0c033b583be4bfcf"
+  "packageManager": "pnpm@10.7.0"
 }

package/styles/base.scss

@@ -1,18 +1,20 @@
+/**
+ * @deprecated Use css-variables
+ */
+
 @use "sass:color";
 @use "sass:math";
 
 $color-fg: hsl(0, 0%, 100%) !default;
-$color-bg: hsl(0, 0%, 14%) !default;
-$color-bg-section: rgba(0, 0, 0, 0.33) !default;
-$color-bg-grad-spread: 2% !default;
-$color-bg-start: color.adjust(
-  $color-bg,
-  $lightness: $color-bg-grad-spread
-) !default;
-$color-bg-end: color.adjust(
-  $color-bg,
-  $lightness: -$color-bg-grad-spread
-) !default;
+$color-bg: var(--color-base) !default;
+$color-bg-section: var(--color-section) !default;
+$color-bg-grad-spread: var(--base-gradient-spread) !default;
+$color-bg-start: var(--color-base-start) !default;
+$color-bg-end: var(--color-base-end) !default;
+
+$cursor-default: var(--cursor-default) !default;
+$cursor-hover: var(--cursor-pointer) !default;
+$cursor-disabled: var(--cursor-default) !default;
 
 $unit: 12px;
 $font-size: 1 * $unit !default;