tgui-core 3.0.1 → 3.0.3

package/dist/components/Input.d.ts

@@ -63,8 +63,6 @@ export type TextInputProps = Partial<{
 type Props = Partial<{
     /** 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;C(t),p?a(()=>d?.(t)):d?.(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.d.ts

@@ -12,6 +12,8 @@ type Props = Partial<{
     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.
      *
@@ -40,6 +42,8 @@ type Props = Partial<{
  *
  * Creates a numerical input which rejects improper keys.
  *
+ *  Has a special event for changes in validation states - `onValidationChange`.
+ *
  * @see https://github.com/tgstation/tgui-core/blob/main/lib/components/RestrictedInput.tsx
  */
 export declare function RestrictedInput(props: Props): import("react/jsx-runtime").JSX.Element;

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

package/dist/components/TextArea.js

@@ -1 +1 @@
-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};
+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.1",
+  "version": "3.0.3",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],

package/styles/components/Input.scss

@@ -43,3 +43,10 @@
     margin: 0;
   }
 }
+
+.RestrictedInput--invalid {
+  border-color: var(--restricted-input-border-color-invalid);
+  &:focus-within {
+    border-color: var(--restricted-input-border-color-invalid);
+  }
+}

package/styles/vars-components.scss

@@ -137,10 +137,11 @@
   --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)
   );
+  --restricted-input-border-color-invalid: var(--color-bad);
 
   /* Round Gauge */
   --round-gauge-ring-color: var(--input-border-color);