tgui-core 5.7.2 → 5.8.0

package/dist/common/ui.d.ts

@@ -1,6 +1,6 @@
 import type { DOMAttributes } from 'react';
 import type { BoxProps } from '../components/Box';
-import { type BooleanLike } from './react';
+import { type BooleanLike } from './react.ts';
 type UnitMapper = (value: unknown) => string | undefined;
 /**
  * Coverts our rem-like spacing unit into a CSS unit.

package/dist/components/Input.d.ts

@@ -1,6 +1,7 @@
 import { type RefObject } from 'react';
 import type { BoxProps } from './Box';
-export type BaseInputProps<TElement = HTMLInputElement> = Partial<{
+/** Takes two optional params: The dom element type & the input type */
+export type BaseInputProps<TElement = HTMLInputElement, TInput = string> = Partial<{
     /** Automatically focuses the input on mount */
     autoFocus: boolean;
     /** Automatically selects the input value on focus */
@@ -22,24 +23,24 @@ export type BaseInputProps<TElement = HTMLInputElement> = Partial<{
     fluid: boolean;
     /** Mark this if you want to use a monospace font */
     monospace: boolean;
-    /** Allows to toggle on spellcheck on inputs */
-    spellcheck: boolean;
-}> & BoxProps<TElement>;
-export type TextInputProps<TElement = HTMLInputElement> = Partial<{
-    /** The maximum length of the input value */
-    maxLength: number;
     /** Fires each time focus leaves the input, including if Esc or Enter are pressed */
-    onBlur: (value: string) => void;
-    /** Fires each time the input has been changed */
-    onChange: (value: string) => void;
+    onBlur: (value: TInput) => void;
+    /**
+     * Fires each time the input has been changed. You do not need to enter the second param unless you're using it. All of these are valid:
+     *
+     * @example
+     * ```tsx
+     * <Input onChange={(value) => console.log(value)} />
+     * <Input onChange={(value, event) => console.log(value, event)} />
+     * <Input onChange={console.log} /> // This will log the value and the event
+     * <Input onChange={setValue} /> // This will just change the value state
+     * ```
+     */
+    onChange: (value: TInput, event?: React.ChangeEvent<TElement>) => void;
     /** Fires once the enter key is pressed */
-    onEnter: (value: string) => void;
+    onEnter: (value: TInput, event?: React.KeyboardEvent<TElement>) => void;
     /** Fires once the escape key is pressed */
-    onEscape: (value: string) => void;
-    /** The placeholder text when everything is cleared */
-    placeholder: string;
-    /** Clears the input value on enter */
-    selfClear: boolean;
+    onEscape: (value: TInput, event?: React.KeyboardEvent<TElement>) => void;
     /**
      * Generally, input can handle its own state value. You might not NEED this.
      *
@@ -80,12 +81,20 @@ export type TextInputProps<TElement = HTMLInputElement> = Partial<{
      * )
      * ```
      */
-    value: string;
-}> & BaseInputProps<TElement>;
-type Props = Partial<{
+    value: TInput;
+}> & BoxProps<TElement>;
+export type TextInputProps<TElement = HTMLInputElement> = Partial<{
+    /** The maximum length of the input value */
+    maxLength: number;
+    /** The placeholder text when everything is cleared */
+    placeholder: string;
     /** Ref of the input element */
-    ref: RefObject<HTMLInputElement | null>;
-}> & BaseInputProps & TextInputProps;
+    ref: RefObject<TElement | null>;
+    /** Clears the input value on enter */
+    selfClear: boolean;
+    /** Allows to toggle on spellcheck on inputs */
+    spellcheck: boolean;
+}> & BaseInputProps<TElement>;
 /**
  * ## Input
  *
@@ -94,5 +103,4 @@ type Props = Partial<{
  * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-input--docs)
  * - [View inherited Box props](https://tgstation.github.io/tgui-core/?path=/docs/components-box--docs)
  */
-export declare function Input(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Input(props: TextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";let i=u(e=>e(),250);function p(u){let{autoFocus:p,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:j,onBlur:y,onChange:I,onEnter:b,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,spellcheck:E=!1,value:w,...B}=u,K=l(null),L=C??K,[N,q]=a(w??"");c(()=>{let e;return(p||f)&&(e=setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{L.current&&document.activeElement!==L.current&&w!==N&&q(w??"")},[w]);let z=m(B),A=n(["Input",d&&"Input--disabled",v&&"Input--fluid",j&&"Input--monospace",o(B),s]);return e("input",{...z,autoComplete:"off",className:A,disabled:d,maxLength:T,onBlur:()=>y?.(N),onChange:function(e){let t=e.currentTarget.value;q(t),g?i(()=>I?.(t)):I?.(t)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),b?.(e.currentTarget.value),D&&q(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:x,ref:L,spellCheck:E,type:"text",value:N})}export{p as Input};
+import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";let i=u(e=>e(),250);function p(u){let{autoFocus:p,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:j,onBlur:y,onChange:I,onEnter:b,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,spellcheck:E=!1,value:w,...B}=u,K=l(null),L=C??K,[N,q]=a(w??"");c(()=>{let e;return(p||f)&&(e=setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{L.current&&document.activeElement!==L.current&&w!==N&&q(w??"")},[w]);let z=m(B),A=n(["Input",d&&"Input--disabled",v&&"Input--fluid",j&&"Input--monospace",o(B),s]);return e("input",{...z,autoComplete:"off",className:A,disabled:d,maxLength:T,onBlur:()=>y?.(N),onChange:function(e){let t=e.currentTarget.value;q(t),g?i(()=>I?.(t,e)):I?.(t,e)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),b?.(e.currentTarget.value,e),D&&q(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value,e),e.currentTarget.blur())},placeholder:x,ref:L,spellCheck:E,type:"text",value:N})}export{p as Input};

package/dist/components/RestrictedInput.d.ts

@@ -6,58 +6,9 @@ type Props = Partial<{
     maxValue: number;
     /** Min value. 0 by default. */
     minValue: number;
-    /** Fires each time focus leaves the input, including if Esc or Enter are pressed */
-    onBlur: (value: number) => void;
-    /** Fires each time the input has been changed */
-    onChange: (value: number) => void;
-    /** Fires once the enter key is pressed */
-    onEnter: (value: number) => void;
-    /** Fires once the escape key is pressed */
-    onEscape: (value: number) => void;
     /** Fires on input validation change */
     onValidationChange: (isValid: boolean) => void;
-    /**
-     * Generally, input can handle its own state value. You might not NEED this.
-     *
-     * Use this if you want to hold the value in the parent for external
-     * manipulation. For instance:
-     *
-     * Clearing the input
-     *
-     * ```tsx
-     * const [value, setValue] = useState(1);
-     *
-     * return (
-     *  <>
-     *    <Button onClick={() => act('inputVal', {inputVal: value})}>
-     *      Submit
-     *    </Button>
-     *    <RestrictedInput
-     *      value={value}
-     *      onChange={setValue} />
-     *    <Button onClick={() => setValue(1)}>
-     *      Clear
-     *    </Button>
-     *  </>
-     * )
-     * ```
-     *
-     * Updating the value from the backend
-     *
-     * ```tsx
-     * const { data } = useBackend<Data>();
-     * const { valveSetting } = data;
-     *
-     * return (
-     *  <RestrictedInput
-     *    value={valveSetting}
-     *    onEnter={(value) => act('submit', { valveSetting: value })}
-     *  />
-     * )
-     * ```
-     */
-    value: number;
-}> & BaseInputProps;
+}> & BaseInputProps<HTMLInputElement, number>;
 /**
  * ## RestrictedInput
  *

package/dist/components/RestrictedInput.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as i}from"../common/ui.js";import{useEffect as m,useRef as c,useState as l}from"react";let a=u(e=>e(),250);function f(u){let{allowFloats:f,autoFocus:p,autoSelect:s,className:d,disabled:v,expensive:y,fluid:I,maxValue:b=1e4,minValue:j=0,monospace:k,onBlur:D,onChange:x,onEnter:C,onEscape:R,onKeyDown:g,onValidationChange:h,value:E,...N}=u,T=c(null),[w,B]=l(E??j),[K,M]=l(!0);function q(e){x&&(y?a(()=>x(e)):x(e))}m(()=>{let e;return(p||s)&&(e=setTimeout(()=>{T.current?.focus(),s&&T.current?.select()},1)),()=>clearTimeout(e)},[]),m(()=>{if(T.current){let e=T.current.validity.valid;K!==e&&(M(e),h?.(e))}},[w]),m(()=>{T.current&&document.activeElement!==T.current&&E!==w&&B(E??j)},[E]);let z=i(N),A=n(["Input","RestrictedInput",v&&"Input--disabled",I&&"Input--fluid",k&&"Input--monospace",o(N),d,!K&&"RestrictedInput--invalid"]);return e("input",{...z,autoComplete:"off",className:A,disabled:v,max:b,min:j,onBlur:function(e){D?.(w)},onChange:function(e){let t=Number(e.target.value);B(t),q(t)},onKeyDown:function(e){if(g?.(e),e.key===t.Enter){e.preventDefault(),C?.(w),T.current?.blur();return}if(r(e.key)){e.preventDefault(),R?.(w),T.current?.blur();return}if(e.key===t.Minus){e.preventDefault();let t=-1*w;B(t),q(t);return}},ref:T,spellCheck:!1,step:f?"any":"1",type:"number",value:w})}export{f as RestrictedInput};
+import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as i}from"../common/ui.js";import{useEffect as m,useRef as c,useState as l}from"react";let a=u(e=>e(),250);function f(u){let{allowFloats:f,autoFocus:p,autoSelect:s,className:d,disabled:v,expensive:y,fluid:I,maxValue:b=1e4,minValue:j=0,monospace:k,onBlur:D,onChange:x,onEnter:C,onEscape:R,onKeyDown:g,onValidationChange:h,value:E,...N}=u,T=c(null),[w,B]=l(E??j),[K,M]=l(!0);function q(e,t){x&&(y?a(()=>x?.(e,t)):x(e,t))}m(()=>{let e;return(p||s)&&(e=setTimeout(()=>{T.current?.focus(),s&&T.current?.select()},1)),()=>clearTimeout(e)},[]),m(()=>{if(T.current){let e=T.current.validity.valid;K!==e&&(M(e),h?.(e))}},[w]),m(()=>{T.current&&document.activeElement!==T.current&&E!==w&&B(E??j)},[E]);let z=i(N),A=n(["Input","RestrictedInput",v&&"Input--disabled",I&&"Input--fluid",k&&"Input--monospace",o(N),d,!K&&"RestrictedInput--invalid"]);return e("input",{...z,autoComplete:"off",className:A,disabled:v,max:b,min:j,onBlur:function(e){D?.(w)},onChange:function(e){let t=Number(e.target.value);B(t),q(t,e)},onKeyDown:function(e){if(g?.(e),e.key===t.Enter){e.preventDefault(),C?.(w,e),T.current?.blur();return}if(r(e.key)){e.preventDefault(),R?.(w,e),T.current?.blur();return}if(e.key===t.Minus){e.preventDefault();let t=-1*w;B(t),q(t,e);return}},ref:T,spellCheck:!1,step:f?"any":"1",type:"number",value:w})}export{f as RestrictedInput};

package/dist/components/TextArea.d.ts

@@ -1,10 +1,7 @@
-import type { RefObject } from 'react';
 import type { TextInputProps } from './Input';
 type Props = Partial<{
     /** Don't use tab for indent */
     dontUseTabForIndent: boolean;
-    /** Ref to the textarea element. */
-    ref: RefObject<HTMLTextAreaElement | null>;
     /**
      * Provides a Record with key: markupChar entries which can be used for
      * ctrl + key combinations to surround a selected text with the markup

package/dist/components/TextArea.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{computeBoxClassName as u,computeBoxProps as o}from"../common/ui.js";import{debounce as a}from"../common/timer.js";import{useEffect as c,useRef as l,useState as m}from"react";let i=a(e=>e(),250);function s(a){let{autoFocus:s,autoSelect:f,className:g,disabled:p,dontUseTabForIndent:T,expensive:v,fluid:y,maxLength:b,monospace:d,onBlur:k,onChange:$,onEnter:h,onEscape:x,onKeyDown:j,placeholder:D,ref:E,selfClear:I,spellcheck:K=!1,userMarkup:C,value:A,...w}=a,B=l(null),L=E??B,[N,q]=m(A??"");c(()=>{(s||f)&&setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)},[]),c(()=>{L.current&&document.activeElement!==L.current&&A!==N&&q(A??"")},[A]);let z=o(w),F=n(["Input","TextArea",y&&"Input--fluid",d&&"Input--monospace",p&&"Input--disabled",u(w),g]);return e("textarea",{...z,autoComplete:"off",className:F,maxLength:b,onBlur:function(e){k?.(N)},onChange:function(e){let t=e.currentTarget.value;q(t),$&&(v?i(()=>$(t)):$(t))},onKeyDown:function(e){if(j?.(e),e.key===t.Enter&&!e.shiftKey){e.preventDefault(),h?.(e.currentTarget.value),I&&q(""),e.currentTarget.blur();return}if(r(e.key)){x?.(e.currentTarget.value),e.currentTarget.blur();return}if(!T&&e.key===t.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:n}=e.currentTarget;q(`${t.substring(0,r)}	${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,$?.(e.currentTarget.value);return}if(C&&(e.ctrlKey||e.metaKey)&&C[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=C[e.key];q(`${n.substring(0,t)}${u}${n.substring(t,r)}${u}${n.substring(r)}`),e.currentTarget.selectionEnd=r+2*u.length,$?.(e.currentTarget.value);return}},placeholder:D,ref:L,spellCheck:K,value:N})}export{s as TextArea};
+import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{computeBoxClassName as u,computeBoxProps as o}from"../common/ui.js";import{debounce as a}from"../common/timer.js";import{useEffect as c,useRef as l,useState as m}from"react";let i=a(e=>e(),250);function s(a){let{autoFocus:s,autoSelect:f,className:g,disabled:p,dontUseTabForIndent:T,expensive:v,fluid:y,maxLength:b,monospace:d,onBlur:k,onChange:$,onEnter:h,onEscape:x,onKeyDown:j,placeholder:D,ref:E,selfClear:I,spellcheck:K=!1,userMarkup:C,value:A,...w}=a,B=l(null),L=E??B,[N,q]=m(A??"");c(()=>{(s||f)&&setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)},[]),c(()=>{L.current&&document.activeElement!==L.current&&A!==N&&q(A??"")},[A]);let z=o(w),F=n(["Input","TextArea",y&&"Input--fluid",d&&"Input--monospace",p&&"Input--disabled",u(w),g]);return e("textarea",{...z,autoComplete:"off",className:F,maxLength:b,onBlur:function(e){k?.(N)},onChange:function(e){let t=e.currentTarget.value;q(t),$&&(v?i(()=>$?.(t,e)):$(t,e))},onKeyDown:function(e){if(j?.(e),e.key===t.Enter&&!e.shiftKey){e.preventDefault(),h?.(e.currentTarget.value,e),I&&q(""),e.currentTarget.blur();return}if(r(e.key)){x?.(e.currentTarget.value,e),e.currentTarget.blur();return}if(!T&&e.key===t.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:n}=e.currentTarget;q(`${t.substring(0,r)}	${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,$?.(e.currentTarget.value,e);return}if(C&&(e.ctrlKey||e.metaKey)&&C[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=C[e.key];q(`${n.substring(0,t)}${u}${n.substring(t,r)}${u}${n.substring(r)}`),e.currentTarget.selectionEnd=r+2*u.length,$?.(e.currentTarget.value,e);return}},placeholder:D,ref:L,spellCheck:K,value:N})}export{s as TextArea};

package/package.json

@@ -71,5 +71,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.7.2"
+  "version": "5.8.0"
 }