tgui-core 2.0.5 → 2.0.6

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/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.5",
+  "version": "2.0.6",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

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%;
+}