tgui-core 1.8.4 → 2.0.1

package/dist/components/Dropdown.js

@@ -1,157 +1,165 @@
-import { jsx as l, jsxs as p, Fragment as F } from "react/jsx-runtime";
-import { useState as L, useRef as S, useEffect as V } from "react";
-import { classes as N } from "../common/react.js";
-import { unit as $ } from "../common/ui.js";
-import { Button as D } from "./Button.js";
-import { Icon as b } from "./Icon.js";
-import { Popper as q } from "./Popper.js";
-const z = -1;
-function h(u) {
-  return typeof u == "string" ? u : u.value;
+import { jsxs as u, jsx as r, Fragment as I } from "react/jsx-runtime";
+import { useState as S, useRef as V } from "react";
+import { KEY as O } from "../common/keys.js";
+import { classes as D } from "../common/react.js";
+import { unit as C } from "../common/ui.js";
+import { Button as E } from "./Button.js";
+import { Floating as Y } from "./Floating.js";
+import { Icon as T } from "./Icon.js";
+const q = -1;
+function f(d) {
+  return typeof d == "string" ? d : d.value;
 }
-function Y(u) {
+function X(d) {
   const {
     autoScroll: v = !0,
-    buttons: I,
-    className: O,
-    clipSelectedText: T = !0,
-    color: B = "default",
-    disabled: d,
-    displayText: E,
+    buttons: k,
+    className: B,
+    color: K = "default",
+    disabled: i,
+    displayText: R,
     icon: x,
-    iconRotation: k,
-    iconSpin: j,
-    menuWidth: C = "15rem",
-    noChevron: R,
+    iconRotation: j,
+    iconSpin: A,
+    iconOnly: h,
+    menuWidth: _,
+    noChevron: F,
     onClick: a,
-    onSelected: o,
-    options: c = [],
+    onSelected: t,
+    options: l = [],
     over: y,
-    placeholder: K = "Select...",
+    placeholder: W = "Select...",
     selected: m,
-    width: P = "15rem"
-  } = u, [r, f] = L(!1), W = y ? !r : r, w = S(null), i = c.findIndex((e) => h(e) === m) || 0;
+    width: $ = 15
+  } = d, [p, P] = S(!1), N = V(null), s = l.findIndex((e) => f(e) === m) || 0;
   function g(e) {
-    let s = e;
-    e < i ? s = e < 2 ? 0 : e - 2 : s = e > c.length - 3 ? c.length - 1 : e - 2;
-    const n = w.current, t = n == null ? void 0 : n.children[s];
-    n && t && (n.scrollTop = t.offsetTop);
+    let n = e;
+    e < s ? n = e < 2 ? 0 : e - 2 : n = e > l.length - 3 ? l.length - 1 : e - 2;
+    const o = N.current, c = o == null ? void 0 : o.children[n];
+    o && c && (o.scrollTop = c.offsetTop);
   }
-  function _(e) {
-    if (c.length < 1 || d)
+  function b(e) {
+    if (l.length < 1 || i)
       return;
-    const s = 0, n = c.length - 1;
-    let t;
-    i < 0 ? t = e === "next" ? n : s : e === "next" ? t = i === n ? s : i + 1 : t = i === s ? n : i - 1, r && v && g(t), o == null || o(h(c[t]));
+    const n = 0, o = l.length - 1;
+    let c;
+    s < 0 ? c = e === "next" ? o : n : e === "next" ? c = s === o ? n : s + 1 : c = s === n ? o : s - 1, p && v && g(c), t == null || t(f(l[c]));
   }
-  return V(() => {
-    var e;
-    r && (v && i !== z && g(i), (e = w.current) == null || e.focus());
-  }, [r]), /* @__PURE__ */ l(
-    q,
-    {
-      isOpen: r,
-      onClickOutside: () => f(!1),
-      placement: y ? "top-start" : "bottom-start",
-      content: /* @__PURE__ */ p(
-        "div",
-        {
-          className: "Layout Dropdown__menu",
-          style: { minWidth: C },
-          ref: w,
-          children: [
-            c.length === 0 && /* @__PURE__ */ l("div", { className: "Dropdown__menuentry", children: "No options" }),
-            c.map((e, s) => {
-              const n = h(e);
-              return /* @__PURE__ */ l(
-                "div",
-                {
-                  className: N([
-                    "Dropdown__menuentry",
-                    m === n && "selected"
-                  ]),
-                  onClick: () => {
-                    f(!1), o == null || o(n);
-                  },
-                  onKeyDown: (t) => {
-                    t.key === "Enter" && (f(!1), o == null || o(n));
-                  },
-                  children: typeof e == "string" ? e : e.displayText
-                },
-                s
-              );
-            })
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ p("div", { className: "Dropdown", style: { width: $(P) }, children: [
-        /* @__PURE__ */ p(
+  let w = y ? "top" : "bottom";
+  return h && (w = `${w}-start`), /* @__PURE__ */ u("div", { className: "Dropdown", children: [
+    /* @__PURE__ */ r(
+      Y,
+      {
+        allowedOutsideClasses: ".Dropdown__button",
+        closeAfterInteract: !0,
+        contentAutoWidth: !_,
+        contentClasses: "Dropdown__menu--wrapper",
+        contentStyles: { width: _ ? C(_) : void 0 },
+        disabled: i,
+        onOpenChange: P,
+        placement: w,
+        content: /* @__PURE__ */ r("div", { ref: N, className: "Dropdown__menu", children: l.length === 0 ? /* @__PURE__ */ r("div", { className: "Dropdown__menu--entry", children: "No options" }) : l.map((e) => {
+          const n = f(e);
+          return /* @__PURE__ */ r(
+            "div",
+            {
+              className: D([
+                "Dropdown__menu--entry",
+                m === n && "selected"
+              ]),
+              onClick: () => {
+                t == null || t(n);
+              },
+              onKeyDown: (o) => {
+                o.key === O.Enter && (t == null || t(n));
+              },
+              children: typeof e == "string" ? e : e.displayText
+            },
+            n
+          );
+        }) }),
+        onMounted: () => {
+          p && v && s !== q && g(s);
+        },
+        children: /* @__PURE__ */ u(
           "div",
           {
-            className: N([
+            className: D([
               "Dropdown__control",
-              "Button",
-              "Button--dropdown",
-              `Button--color--${B}`,
-              d && "Button--disabled",
-              O
+              `Button--color--${K}`,
+              i && "Button--disabled",
+              h && "Dropdown__control--icon-only",
+              B
             ]),
+            style: { width: C($) },
             onClick: (e) => {
-              d && !r || (f(!r), a == null || a(e));
+              i && !p || a == null || a(e);
             },
             onKeyDown: (e) => {
-              e.key === "Enter" && !d && (f(!r), a == null || a(e));
+              e.key === O.Enter && !i && (a == null || a(e));
             },
             children: [
-              x && /* @__PURE__ */ l(b, { mr: 1, name: x, rotation: k, spin: j }),
-              /* @__PURE__ */ l(
-                "span",
+              x && /* @__PURE__ */ r(
+                T,
                 {
-                  className: "Dropdown__selected-text",
-                  style: {
-                    overflow: T ? "hidden" : "visible"
-                  },
-                  children: E || m && h(m) || K
+                  className: "Dropdown__icon",
+                  name: x,
+                  rotation: j,
+                  spin: A
                 }
               ),
-              !R && /* @__PURE__ */ l("span", { className: "Dropdown__arrow-button", children: /* @__PURE__ */ l(b, { name: W ? "chevron-up" : "chevron-down" }) })
+              !h && /* @__PURE__ */ u(I, { children: [
+                /* @__PURE__ */ r("span", { className: "Dropdown__selected-text", children: R || m && f(m) || W }),
+                !F && /* @__PURE__ */ r(
+                  T,
+                  {
+                    className: D([
+                      "Dropdown__icon",
+                      "Dropdown__icon--arrow",
+                      y && "over",
+                      p && "open"
+                    ]),
+                    name: "chevron-down"
+                  }
+                )
+              ] })
             ]
           }
-        ),
-        I && /* @__PURE__ */ p(F, { children: [
-          /* @__PURE__ */ l(
-            D,
-            {
-              disabled: d,
-              height: 1.8,
-              icon: "chevron-left",
-              onClick: () => {
-                _(
-                  "previous"
-                  /* Previous */
-                );
-              }
-            }
-          ),
-          /* @__PURE__ */ l(
-            D,
-            {
-              disabled: d,
-              height: 1.8,
-              icon: "chevron-right",
-              onClick: () => {
-                _(
-                  "next"
-                  /* Next */
-                );
-              }
-            }
-          )
-        ] })
-      ] })
-    }
-  );
+        )
+      }
+    ),
+    k && /* @__PURE__ */ u(I, { children: [
+      /* @__PURE__ */ r(
+        E,
+        {
+          className: "Dropdown__button",
+          disabled: i,
+          icon: "chevron-left",
+          onClick: () => {
+            b(
+              "previous"
+              /* Previous */
+            );
+          }
+        }
+      ),
+      /* @__PURE__ */ r(
+        E,
+        {
+          className: "Dropdown__button",
+          disabled: i,
+          icon: "chevron-right",
+          onClick: () => {
+            b(
+              "next"
+              /* Next */
+            );
+          }
+        }
+      )
+    ] })
+  ] });
 }
 export {
-  Y as Dropdown
+  X as Dropdown
 };

package/dist/components/FitText.d.ts

@@ -9,7 +9,7 @@ type State = {
     fontSize: number;
 };
 export declare class FitText extends Component<Props, State> {
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     state: State;
     constructor(props: Props);
     componentDidUpdate(prevProps: any): void;

package/dist/components/Floating.d.ts

@@ -0,0 +1,75 @@
+import { Placement } from '@floating-ui/react';
+import { CSSProperties, ReactNode } from 'react';
+import { BooleanLike } from '../common/react';
+type Props = {
+    /** Interacting with this element will open the floating element. */
+    children: ReactNode;
+    /** The content to display like floating. */
+    content: ReactNode;
+} & Partial<{
+    /**
+     * Where the content will be displayed, relative to children.
+     * - See [Placement](https://floating-ui.com/docs/useFloating#placement)
+     * @default 'bottom'
+     */
+    placement: Placement;
+    /** Classes with will be applied to the content. */
+    contentClasses: string;
+    /** Inline styles with will be applied to the content. */
+    contentStyles: CSSProperties;
+    /** Use calculated by Floating UI children width as content width. */
+    contentAutoWidth: boolean;
+    /**
+     * Indentation of content element from children.
+     * @default 6
+     */
+    contentOffset: number;
+    /** Disables all interactions. */
+    disabled: BooleanLike;
+    /**
+     * How long the animation takes in ms.
+     * - If specified, default animation will be disabled.
+     * - Fully disables animations if 0
+     * @default 200
+     */
+    animationDuration: number;
+    /** Content will open when you hover over children. */
+    hoverOpen: boolean;
+    /**
+     * Delay in ms before opening and closing the content.
+     * - Works only if used `hoverOpen` prop.
+     * @default 200
+     */
+    hoverDelay: number;
+    /**
+     * Whitelisted classes.
+     * Used to allow to add some secured classes,
+     * click on which will not close the content.
+     * - Classes must be sent like this: `".class1, .class2"`
+     */
+    allowedOutsideClasses: string;
+    /** Stops event propagation on children. */
+    stopChildPropagation: boolean;
+    /** Close the content after interaction with it. */
+    closeAfterInteract: boolean;
+    /**
+     * Called when the open state changes.
+     * Returns the new open state.
+     * Can be used this way:
+     * ```tsx
+     * onOpenChange={open ? makeThingsOnOpen : makeThingsOnClose}
+     * ```
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Called when mounted
+     */
+    onMounted: () => void;
+}>;
+/**
+ * ## Floating
+ *  Floating lets you position elements so that they don't go out of the bounds of the window.
+ * - [Documentation](https://floating-ui.com/docs/react) for more information.
+ */
+export declare function Floating(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};