tgui-core 3.0.2 → 3.0.3

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "3.0.2",
+  "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

@@ -141,6 +141,7 @@
   --restricted-input-border-color-focus: hsl(
     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);