tgui-core 2.0.6 → 2.1.0

package/dist/components/NumberInput.js

@@ -1,213 +1 @@
-var I = Object.defineProperty;
-var E = (m, d, e) => d in m ? I(m, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : m[d] = e;
-var o = (m, d, e) => E(m, typeof d != "symbol" ? d + "" : d, e);
-import { jsxs as N, jsx as f } from "react/jsx-runtime";
-import { Component as x, createRef as D } from "react";
-import { KEY as _, isEscape as M } from "../common/keys.js";
-import { clamp as h, round as T } from "../common/math.js";
-import { classes as w } from "../common/react.js";
-import { AnimatedNumber as F } from "./AnimatedNumber.js";
-import { Box as R } from "./Box.js";
-class H extends x {
-  constructor() {
-    super(...arguments);
-    // Ref to the input field to set focus & highlight
-    o(this, "inputRef", D());
-    // After this time has elapsed we are in drag mode so no editing when dragging ends
-    o(this, "dragTimeout");
-    // Call onDrag at this interval
-    o(this, "dragInterval");
-    // default values for the number input state
-    o(this, "state", {
-      editing: !1,
-      dragging: !1,
-      currentValue: 0,
-      previousValue: 0,
-      origin: 0
-    });
-    o(this, "handleDragStart", (e) => {
-      const { value: u, disabled: n } = this.props, { editing: s } = this.state;
-      if (n || s)
-        return;
-      document.body.style["pointer-events"] = "none";
-      const r = Number.parseFloat(u.toString());
-      this.setState({
-        dragging: !1,
-        origin: e.screenY,
-        currentValue: r,
-        previousValue: r
-      }), this.dragTimeout = setTimeout(() => {
-        this.setState({
-          dragging: !0
-        });
-      }, 250), this.dragInterval = setInterval(() => {
-        const { dragging: l, currentValue: i, previousValue: t } = this.state, { onDrag: a } = this.props;
-        l && i !== t && (this.setState({
-          previousValue: i
-        }), a == null || a(i));
-      }, 400), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd);
-    });
-    o(this, "handleDragMove", (e) => {
-      const { minValue: u, maxValue: n, step: s, stepPixelSize: r, disabled: l } = this.props;
-      l || this.setState((i) => {
-        const t = { ...i }, a = t.origin - e.screenY;
-        if (i.dragging) {
-          const g = r || 1, c = h(
-            t.currentValue + a * s / g,
-            u - s,
-            n + s
-          );
-          Math.abs(c - t.currentValue) >= s ? (t.currentValue = h(
-            T(c / s, 0) * s,
-            u,
-            n
-          ), t.origin = e.screenY) : Math.abs(a) > g && (t.origin = e.screenY);
-        } else Math.abs(a) > 4 && (t.dragging = !0);
-        return t;
-      });
-    });
-    o(this, "handleDragEnd", (e) => {
-      const { dragging: u, currentValue: n } = this.state, { onDrag: s, onChange: r, disabled: l } = this.props;
-      if (!l) {
-        if (document.body.style["pointer-events"] = "auto", clearInterval(this.dragInterval), clearTimeout(this.dragTimeout), this.setState({
-          dragging: !1,
-          editing: !u,
-          previousValue: n
-        }), u)
-          r == null || r(n), s == null || s(n);
-        else if (this.inputRef) {
-          const i = this.inputRef.current;
-          i && (i.value = `${n}`, setTimeout(() => {
-            i.focus(), i.select();
-          }, 10));
-        }
-        document.removeEventListener("mousemove", this.handleDragMove), document.removeEventListener("mouseup", this.handleDragEnd);
-      }
-    });
-    o(this, "handleBlur", (e) => {
-      const { editing: u, previousValue: n } = this.state, { minValue: s, maxValue: r, onChange: l, onDrag: i, disabled: t } = this.props;
-      if (t || !u)
-        return;
-      const a = h(
-        Number.parseFloat(e.target.value),
-        s,
-        r
-      );
-      if (Number.isNaN(a)) {
-        this.setState({
-          editing: !1
-        });
-        return;
-      }
-      this.setState({
-        editing: !1,
-        currentValue: a,
-        previousValue: a
-      }), n !== a && (l == null || l(a), i == null || i(a));
-    });
-    o(this, "handleKeyDown", (e) => {
-      const { minValue: u, maxValue: n, onChange: s, onDrag: r, disabled: l } = this.props;
-      if (l)
-        return;
-      const { previousValue: i } = this.state;
-      if (e.key === _.Enter) {
-        const t = h(
-          Number.parseFloat(e.currentTarget.value),
-          u,
-          n
-        );
-        if (Number.isNaN(t)) {
-          this.setState({
-            editing: !1
-          });
-          return;
-        }
-        this.setState({
-          editing: !1,
-          currentValue: t,
-          previousValue: t
-        }), i !== t && (s == null || s(t), r == null || r(t));
-      } else M(e.key) && this.setState({
-        editing: !1
-      });
-    });
-  }
-  componentDidMount() {
-    const e = Number.parseFloat(this.props.value.toString());
-    this.setState({
-      currentValue: e,
-      previousValue: e
-    });
-  }
-  render() {
-    const { dragging: e, editing: u, currentValue: n } = this.state, {
-      className: s,
-      fluid: r,
-      animated: l,
-      unit: i,
-      value: t,
-      minValue: a,
-      maxValue: g,
-      height: c,
-      width: S,
-      lineHeight: v,
-      fontSize: b,
-      format: V
-    } = this.props;
-    let p = Number.parseFloat(t.toString());
-    e && (p = n);
-    const y = /* @__PURE__ */ N("div", { className: "NumberInput__content", children: [
-      l && !e ? /* @__PURE__ */ f(F, { value: p, format: V }) : V ? V(p) : p,
-      i ? ` ${i}` : ""
-    ] });
-    return /* @__PURE__ */ N(
-      R,
-      {
-        className: w([
-          "NumberInput",
-          r && "NumberInput--fluid",
-          s
-        ]),
-        minWidth: S,
-        minHeight: c,
-        lineHeight: v,
-        fontSize: b,
-        onMouseDown: this.handleDragStart,
-        children: [
-          /* @__PURE__ */ f("div", { className: "NumberInput__barContainer", children: /* @__PURE__ */ f(
-            "div",
-            {
-              className: "NumberInput__bar",
-              style: {
-                height: `${h(
-                  (p - a) / (g - a) * 100,
-                  0,
-                  100
-                )}%`
-              }
-            }
-          ) }),
-          y,
-          /* @__PURE__ */ f(
-            "input",
-            {
-              ref: this.inputRef,
-              className: "NumberInput__input",
-              style: {
-                display: u ? "inline" : "none",
-                height: c,
-                lineHeight: v,
-                fontSize: b
-              },
-              onBlur: this.handleBlur,
-              onKeyDown: this.handleKeyDown
-            }
-          )
-        ]
-      }
-    );
-  }
-}
-export {
-  H as NumberInput
-};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as s from"../common/math.js";import*as i from"../common/react.js";import*as a from"./AnimatedNumber.js";import*as n from"./Box.js";class o extends t.Component{inputRef=(0,t.createRef)();dragTimeout;dragInterval;state={editing:!1,dragging:!1,currentValue:0,previousValue:0,origin:0};componentDidMount(){let e=Number.parseFloat(this.props.value.toString());this.setState({currentValue:e,previousValue:e})}handleDragStart=e=>{let{value:t,disabled:r}=this.props,{editing:s}=this.state;if(r||s)return;document.body.style["pointer-events"]="none";let i=Number.parseFloat(t.toString());this.setState({dragging:!1,origin:e.screenY,currentValue:i,previousValue:i}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onDrag:s}=this.props;e&&t!==r&&(this.setState({previousValue:t}),s?.(t))},400),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd)};handleDragMove=e=>{let{minValue:t,maxValue:r,step:i,stepPixelSize:a,disabled:n}=this.props;n||this.setState(n=>{let o={...n},u=o.origin-e.screenY;if(n.dragging){let n=a||1,l=(0,s.clamp)(o.currentValue+u*i/n,t-i,r+i);Math.abs(l-o.currentValue)>=i?(o.currentValue=(0,s.clamp)((0,s.round)(l/i,0)*i,t,r),o.origin=e.screenY):Math.abs(u)>n&&(o.origin=e.screenY)}else Math.abs(u)>4&&(o.dragging=!0);return o})};handleDragEnd=e=>{let{dragging:t,currentValue:r}=this.state,{onDrag:s,onChange:i,disabled:a}=this.props;if(!a){if(document.body.style["pointer-events"]="auto",clearInterval(this.dragInterval),clearTimeout(this.dragTimeout),this.setState({dragging:!1,editing:!t,previousValue:r}),t)i?.(r),s?.(r);else if(this.inputRef){let e=this.inputRef.current;e&&(e.value=`${r}`,setTimeout(()=>{e.focus(),e.select()},10))}document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleBlur=e=>{let{editing:t,previousValue:r}=this.state,{minValue:i,maxValue:a,onChange:n,onDrag:o,disabled:u}=this.props;if(u||!t)return;let l=(0,s.clamp)(Number.parseFloat(e.target.value),i,a);if(Number.isNaN(l))return void this.setState({editing:!1});this.setState({editing:!1,currentValue:l,previousValue:l}),r!==l&&(n?.(l),o?.(l))};handleKeyDown=e=>{let{minValue:t,maxValue:i,onChange:a,onDrag:n,disabled:o}=this.props;if(o)return;let{previousValue:u}=this.state;if(e.key===r.KEY.Enter){let r=(0,s.clamp)(Number.parseFloat(e.currentTarget.value),t,i);if(Number.isNaN(r))return void this.setState({editing:!1});this.setState({editing:!1,currentValue:r,previousValue:r}),u!==r&&(a?.(r),n?.(r))}else(0,r.isEscape)(e.key)&&this.setState({editing:!1})};render(){let{dragging:t,editing:r,currentValue:o}=this.state,{className:u,fluid:l,animated:m,unit:h,value:d,minValue:p,maxValue:g,height:c,width:v,lineHeight:f,fontSize:N,format:b}=this.props,S=Number.parseFloat(d.toString());t&&(S=o);let V=(0,e.jsxs)("div",{className:"NumberInput__content",children:[m&&!t?(0,e.jsx)(a.AnimatedNumber,{value:S,format:b}):b?b(S):S,h?` ${h}`:""]});return(0,e.jsxs)(n.Box,{className:(0,i.classes)(["NumberInput",l&&"NumberInput--fluid",u]),minWidth:v,minHeight:c,lineHeight:f,fontSize:N,onMouseDown:this.handleDragStart,children:[(0,e.jsx)("div",{className:"NumberInput__barContainer",children:(0,e.jsx)("div",{className:"NumberInput__bar",style:{height:`${(0,s.clamp)((S-p)/(g-p)*100,0,100)}%`}})}),V,(0,e.jsx)("input",{ref:this.inputRef,className:"NumberInput__input",style:{display:r?"inline":"none",height:c,lineHeight:f,fontSize:N},onBlur:this.handleBlur,onKeyDown:this.handleKeyDown})]})}}export{o as NumberInput};

package/dist/components/Popper.d.ts

@@ -1,12 +1,11 @@
-import { Placement } from '@popperjs/core';
-import { PropsWithChildren, ReactNode } from 'react';
-type RequiredProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PropsWithChildren, ReactNode } from 'react';
+type Props = {
     /** The content to display in the popper */
     content: ReactNode;
     /** Whether the popper is open */
     isOpen: boolean;
-};
-type OptionalProps = Partial<{
+} & Partial<{
     /** Base z-index of the popper div
      * @default 5
      */
@@ -15,16 +14,16 @@ type OptionalProps = Partial<{
     onClickOutside: () => void;
     /** Where to place the popper relative to the reference element */
     placement: Placement;
-}>;
-type Props = RequiredProps & OptionalProps;
+}> & PropsWithChildren;
 /**
  * ## Popper
  * 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.
+ *
+ * This will serve as a wrapper for floating ui until replaced.
  */
-export declare function Popper(props: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
+export declare function Popper(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};