tgui-core 3.0.2 → 3.0.4

package/dist/components/RestrictedInput.d.ts

@@ -12,26 +12,45 @@ 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.
+     * 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.
+     * 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;
+     * const [value, setValue] = useState(1);
      *
      * return (
      *  <>
      *    <Button onClick={() => act('inputVal', {inputVal: value})}>
      *      Submit
      *    </Button>
-     *    <RestrictedInput value={value} onChange={setValue} />
+     *    <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;
@@ -40,6 +59,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 a(r){let{allowFloats:a,autoFocus:c,autoSelect:m,className:i,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),[C,K]=(0,n.useState)(!0),M=(0,n.useMemo)(()=>(0,u.computeBoxProps)(k),[k]),g=(0,n.useMemo)(()=>(0,t.classes)(["Input","RestrictedInput",l&&"Input--disabled",p&&"Input--fluid",y&&"Input--monospace",i,!C&&"RestrictedInput--invalid"]),[i,l,p,C,y]);return(0,n.useEffect)(()=>{let e;return(c||m)&&(e=setTimeout(()=>{x.current?.focus(),m&&x.current?.select()},1)),()=>clearTimeout(e)},[]),(0,n.useEffect)(()=>{if(x.current){let e=x.current.validity.valid;C!==e&&(K(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",{...M,autoComplete:"off",className:g,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,step:a?"any":"1",type:"number",value:D})}export{a as RestrictedInput};

package/package.json

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