tgui-core 3.0.0 → 3.0.2

package/dist/components/Input.d.ts

@@ -9,6 +9,15 @@ export type BaseInputProps = Partial<{
     className: string;
     /** Disables the input. Outlined in gray */
     disabled: boolean;
+    /**
+     * Whether to debounce the onChange event.
+     *
+     * Do this if it's performing expensive ops on each input, like filtering or
+     * sending the value immediate to Byond (via act).
+     *
+     * It will only fire once every 250ms.
+     */
+    expensive: boolean;
     /** Fills the parent container */
     fluid: boolean;
     /** Mark this if you want to use a monospace font */
@@ -30,7 +39,8 @@ export type TextInputProps = Partial<{
     /**
      * Generally, input can handle its own state value.
      *
-     * Use this if you want to hold the value in the parent for external manipulation.
+     * Use this if you want to hold the value in the parent for external
+     * manipulation.
      *
      * ```tsx
      * const [value, setValue] = useState('');
@@ -51,16 +61,8 @@ export type TextInputProps = Partial<{
     value: string;
 }> & BaseInputProps;
 type Props = Partial<{
-    /**
-     * Whether to debounce the input.
-     * Do this if it's performing expensive ops on each input.
-     * It will only fire once every 250ms.
-     */
-    expensive: boolean;
     /** Ref of the input element */
     ref: RefObject<HTMLInputElement | null>;
-    /** Auto-updates the input value on props change, ie, data from Byond */
-    updateOnPropsChange: boolean;
 }> & BaseInputProps & TextInputProps;
 /**
  * ## Input

package/dist/components/Input.js

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

package/dist/components/RestrictedInput.js

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

package/dist/components/TextArea.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

package/styles/vars-components.scss

@@ -137,9 +137,9 @@
   --progress-bar-transition: var(--transition-time-slowest);
 
   /* Restricted Input */
-  --restricted-input-border-color: var(--color-green);
+  --restricted-input-border-color: var(--color-good);
   --restricted-input-border-color-focus: hsl(
-    from var(--color-green) h s calc(l + 10)
+    from var(--color-good) h s calc(l + 10)
   );
 
   /* Round Gauge */